本章附件：chapter4 DOM基础
DOM基础
一个HTML文档可以看成由有层次的节点组成的节点树，其中<html>元素是根节点，它有2个子节点<head>和<body>。节点是有类型的，常用的节点类型是元素节点、文本节点和属性节点。
| nodeName | nodeValue | nodeType | |
| 元素节点 | 标记名 | null | 1 |
| 文本节点 | #text | 文本的内容 | 3 |
| 属性节点 | 属性名 | 属性值 | 2 |
- 捕获元素
- 在document上可以调用的get系列方法
document. getElementById (元素的id)：返回元素或null
document.getElementsByName(元素的name)：返回元素集合或null
document. getElementsByTagName(元素的标记)：返回元素集合或null
- 在document和元素上可以调用的getElementsByClassName(类名)方法：返回列表或null
- 在document和元素上可以调用的querySelector(CSS选择符)和querySelectorAll(CSS选择符)方法：返回元素、列表或null
- innerText属性、innerHtml属性、outerHtml属性
- document上的几个特殊属性
- title：返回或设置文档的标题
- body：返回对<body>元素的引用
- URL：返回文档的URL(统一资源定位器)
- domain：返回文档所在的域
- anchors：返回文档中所有带有name属性的<a>元素
- links：返回文档中所有带有href属性的<a>元素
- forms：返回文档中所有的<form>元素
- images：返回文档中所有的<img>元素
- 访问父节点、子节点和兄弟节点
parentNode方法返回当前节点的父节点或null
childNodes方法返回当前节点的所有子节点构成的列表或null
children方法返回当前节点的所有元素节点构成的列表或null
firstChild属性返回当前节点的第一个子节点
firstElementChild属性返回当前节点的第一个元素子节点
lastChild属性返回当前节点的最后一个子节点
lastElementChild属性返回当前节点的最后一个元素子节点
previousSibling属性返回当前节点的前一个兄弟节点或null
previousElementSibling属性返回当前节点的前一个元素兄弟节点或null
nextSibling属性返回当前节点的下一个兄弟节点或null
nextElementSibling属性返回当前节点的下一个元素兄弟节点或null
- 克隆节点
cloneNode(true|false)方法返回当前节点的副本。参数为true时，副本是当前节点及其子孙节点构成的节点树的副本；参数为false时，副本只是当前节点的副本
- 操作节点
- 创建元素节点：createElement(标记名)
- 创建文本节点：createTextElement(文本)
- appendChild(node)：将node添加到当前节点所有子节点的末尾，返回对node的引用
- insertBefore(node,refNode)：将node插入到参考节点refNode的前面，返回对node的引用
- replaceChild(要插入的节点，要被替换的节点)：返回被替换掉的节点
- removeChild(要删除的节点)：返回被删除的节点
- write()和document.writeln()
- 操作元素的属性
获取元素属性：getAttribute(属性名)，或“对象.属性”
设置元素的属性：setAttribute(属性名，属性值)，或”对象.属性名=属性值”
移除元素的属性：removeAttribute(属性名)
- 操作元素的class属性
classList属性返回元素所使用的类样式的集合，该集合具有如下方法：
add(类样式)：添加类样式；若元素中已有该样式，则不做任何操作
remove(类样式)：移除类样式；若元素中没有该类样式，则不做任何操作
contains(类样式)：若元素中有该类样式则返回true，否则返回false
toggle(类样式)：若元素中没有该类样式，则添加该类样式；若元素中有该类样式，则移除该类样式
- 操作元素的内联样式
元素.style.样式名：返回元素指定的样式名的样式值
元素.style.样式名=“样式值”：设置元素指定的样式。若元素原来没有该样式，则添加该样式；若元素本来就有该样式，则修改该样式
元素.style返回的对象上具有如下API：
cssText：
length:
getPropertyValue(样式名)：获取样式值
removeProperty(样式名)：移除样式
setProperty(样式名，样式值)：设置样式
引自©南通职业大学 - 陈斌老师
如若转载，请注明出处：https://ntvu.love/?p=48
