DOM方法-JS

Posted 2022-12-10 wangshouren

获取DOM元素

1. getElementById（上下文只能是document）
2. getElementsByTagName（返回元素集合htmlCollection）
3. getElementsByClassName（同上，不兼容IE6-8）
4. getElementsByName（上下文只能是document）
5. querySelector(类似CSS选择器,只获取一个，不兼容IE6~8)
6. querySelectorAll(类似CSS选择器,获取所有，不兼容IE6~8)
7. document.head(head)
8. document.body(body)
9. document.documentElement(html)

节点

在一个HTML文档中出现的所有东西都是节点 元素节点（HTML标签）
文本节点（文字内容） 注释节点（注释内容） 文档节点（document）
…每一种类型的节点都会有一些属性区分自己的特性和特征
nodeType：节点类型

nodeName：节点名称
nodeValue：节点值

元素节点:

nodeType：1
nodeName：大写标签名
nodeValue：null

文本节点:

nodeType：3
nodeName：’#text’
nodeValue：文本内容

注释节点:

nodeType：8
nodeName：’#comment’
nodeValue：注释内容

文档节点:

nodeType：9
nodeName：’#document’
nodeValue：null

描述节点之间关系的属性

1. parentNode:获取当前节点唯一的父亲节点.
2. childNodes:获取儿子级别的所有类型节点
3. children:获取当前元素所有的元素子节点
4. previousSibling:上一个哥哥节点
5. previousElementSibling:上一个哥哥元素 节点
6. nextSibling：下一个弟弟节点
7. nextElementSibling：下一个弟弟元素节点
8. firstChild：第一个子节点
9. firstElementChild：第一个元素子节点
10. lastChild：最后一个子节点
11. lastElementChild：最后一个元素子节点

DOM的增删改

1. createElement：创建一个元素标签
2. appendChild：把一个元素对象插入到指定容器的末尾
3. insertBefore：把一个元素对象插入到指定容器中某一个元素标签之前
4. cloneNode：克隆节点
   • [curEle].cloneNode()：浅克隆
   • [curEle].cloneNode(true)深克隆
5. removeChild：删除某一个元素
6. set/get/removeAttribute：设置/获取/删除?当前元素的某一个自定义属性