文章目录
1. DOM 的定义
- (1) DOM 的全称是 Document Object Model, 即文档对象模型
- (2) DOM 定义了表示和修改文档所需的方法. Dom 对象即为宿主对象, 由浏览器厂商定义.
用来操作 html 和 xml 功能的一类对象的集合, 也有人称 DOM 是对 HTML 以及 XML 的标准编程接口
2. 对节点的增删查改
[1] 查看元素节点
document 代表整个文档
- 单独的写 document 代表整个文档
- 若在
<HTML>标签之上, 可以再套一层标签的话, 那这层标签则应该是<document> <html>标签代表的是文档的根目录, document 则代表的是整个文档本身,
因此可以说, document 是整个文档在 js 中的表现形式
document 对象中的获取 / 查看元素的方法
1) document.getElementById()
- 作用: 根据元素的 ID 来获取目标元素
2) document.getElementsByTagName()
- 作用: 根据标签名来获取一组元素, 并将元素存入一个数组之中
- 备注: 存放元素的数组是一个类数组, 若想取得特定对象则在返回的类数组进行操作
- 示例
将页面中节点树上的第一个 div 选出来
document.getElementByTagName('div')[0]
选出页面所有元素中的第一个元素
document.getElementByTagName('*')[0]
3) document.getElementsByClassName()
- 作用: 根据标签内所使用的 class 来获取一组元素, 并将元素存入一个数组之中
即选择使用了该 class 的元素, 并装入类数组之中
4) document.getElementsByName()
- 作用: 根据标签内的 name 属性进行选出元素组
- 备注: 只有部分标签的 name 属性是可以生效的在旧版本浏览器当中
- 有 name 属性的一些标签: 表单, 表单元素, img, iframe
5) document.querySelector()
- 作用: 参数可以直接用 css 选择器对元素进行选择
6) document.querySelectorAll()
- 作用: 与上面方法相同, 但选择的是一组元素, 并符合要求的元素存于类数组当中
- 备注:
但这两个方法所选择的元素并不是实时的,
在页面被动态修改后, 用该方法进行选取元素并不能获取的到新元素,
同时若旧元素被删除, 用该方法却依旧认为这些元素没被删除, 还可以对其进行获取,
因此这两个方法并不推荐使用
[2] 遍历节点树
1) parentNode
- 定义: 父节点, 最顶端的父节点是
#document - 作用: 以 Node 对象的形式返回指定节点的父节点, 如果指定节点没有父节点, 则返回 null
2) childNodes
- 定义: 子节点们
- 作用: 返回指定节点下的子节点们, 存入一个类数组之中
- 备注: 子节点包含所有节点类型
3) firstChild 和 lastChild
- 定义: 第一个 / 最后一个 子节点
- 作用: 返回指定节点下的第一个 / 最后一个 子节点
4) nextSibling 和 previousSibling
- 定义: 下一个 / 上一个 兄弟节点
- 作用: 返回指定节点的 下一个 / 上一个 兄弟节点
[3] 基于元素节点树的遍历
1) parentElement
- 作用: 返回当前元素的父元素节点
2) children
- 作用: 返回当前元素的元素子节点们
3) childElementCount
- 作用: 当前元素节点的子元素的个数
- 备注: 等同于调用 children.length
4) firstElementChild 和 lastElementChild
- 作用: 返回当前元素下的第一个 / 最后一个元素子节点
5) nextElementSibling 和 previousElementSibling
[4] 节点的四个属性
1) nodeName
- 作用: 返回元素的标签名, 以大写形式表示, 只读, 不可修改
2) nodeValue
- 作用: Text 节点或 Comment 节点的文本内容, 可读写
3) nodeType
- 作用: 返回节点的类型, 只读
- 节点的类型分类
(1) 元素节点 -------- 返回值 1
(2) 属性节点 -------- 返回值 2
(3) 文本节点 -------- 返回值 3
(4) 注释节点 -------- 返回值 8
(5) document -------- 返回值 9
(6) DocumentFragment -------- 返回值 11
4) attributes
- 作用: 返回element节点的属性集合, 并将节点的属性全部装入类数组当中
- 备注: 可以通过调用属性集合去修改节点的属性值, 但属性的名字是修改不了的
5) 节点的一个方法 Node.hasChildNodes()
- 作用: 判断该节点下有无子节点, 返回 true/false
[5] DOM 结构树
- DOM 元素的最终父类也是 Object
注意事项
-
1) getElementById 方法定义在 Document.prototype 上, 即 Element 节点上不能使用
-
**2) getElementsByTagName 方法定义在 Document.prototype 和 Element.prototype 上 **
-
3) getElementsByName 方法定义在 HTMLDocument.prototype 上,
即非 HTML 中的 document 不能使用 (xml, document, Element) -
4) HTMLDocument.prototype 定义了一些常用的属性,
body 和 head 分别指代 HTML 文档中的<body> <head>标签 -
5) Document.prototype 定义了 documentElement 属性, 指代文档的根元素,
在 HTML 文档中, 它总是指代<HTML>元素 -
6) getElementsByClassName, querySelector, querySelectorAll 这几个方法
在 Document.prototype 和 Element.prototype 中均有定义
[6] 增加元素节点
1) document.createElement()
- 作用: 新增一个元素节点, 参数内写目标元素的标签名即可
- 示例:
新增一个 div 节点
document.createElement('div');
2) document.createTextNode()
- 作用: 创建一个文本节点, 参数内写字符串即可
3) document.createComment()
- 作用: 创建一个注释节点
4) document.createDocumentFragment()
- 作用: 创建文档碎片节点
[7] 插入元素节点
1) ParentNode.appendChild()
- 作用: 向调用 appendChild 的节点内插入一个子节点, 任何一个元素节点都可调用
- 备注:
若使用该方法将页面已存在的内容插入到另一个元素内, 则会实行剪切操作,
会将该节点剪切并转移到目标节点下, 若被剪切的节点内包含有子节点,
也会一并将这些子节点转移过去
2) ParentNode.insertBefore(a, b)
- 作用:
向调用 insertBefore 的父节点里面插入一个子元素,
并且这个子元素 a 的插入位置在子元素 b 之前
[8] 删除元素节点
1) ParentNode.removeChild()
- 作用: 父节点调用该方法, 将节点内的一个子节点删除
- 备注: 实际上该方法是将子节点进行剪切并作为返回值返回
2) ChildNode.remove()
- 作用: 子节点调用该方法, 将自身移除
- 备注: 这个方法是直接销毁调用节点, 并无返回值
[9] 删除元素节点
1) ParentNode.replaceChild(new, origin)
- 作用: 父节点调用该方法, 用新节点去替换旧节点
- 备注: 旧的节点会被剪切出去, 并作为返回值返回
[10] 元素节点的一些属性
1) innerHTML
- 作用: 可以改变一个元素里面的 HTML 内容或取得其 HTML 文本内容
- 备注:
若直接对一个元素的 innerHTML 用赋值操作, 新值将会覆盖旧值,
若想接上新值于旧值之后, 则用 += 操作符即可
2) innerText
- 作用: 可以取得该元素的文本内容
- 备注:
若对一个元素的 innerText 用赋值操作, 如果该元素内除了文本内容外,
还有其它结构的标签, 直接赋值会将结构全部覆盖掉
[11] 元素节点的一些方法
1) element.setAttribute()
- 参数表: ( 属性名 , 属性值 )
- 作用: 节点调用该方法, 给自身增添新属性
2) element.getAttribute()
- 参数表: ( 属性名 )
- 作用: 节点调用该方法, 获取目标属性的值
3) element.removeAttribute()
- 参数表: ( 属性名 )
- 作用: 节点调用该方法, 移除目标属性
