DOM 就是我们 html 结构中一个一个的节点构成的
不光我们的标签是一个节点,我们写的文本内容也是一个节点,注释,包括空格都是节点
DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
什么是分类,比如我们在获取元素的时候,通过各种方法获取到的我们叫做元素节点(标签节点)
比如我们标签里面写的文字,那么就是文本节点
写在每一个标签上的属性,就是属性节点
- 元素节点
我们通过 getElementBy… 获取到的都是元素节点 - 属性节点
我们通过 getAttribute 获取的就是元素的属性节点 - 文本节点
我们通过 innerText 获取到的就是元素的文本节点
获取节点
1.childNodes:获取某一个节点下 所有的子一级节点
var oDiv = document.querySelector(‘div’)
console.log(oDiv.childNodes)
2.children :获取某一节点下所有的子一级 元素节点
3.firstChild:获取某一节点下子一级的 第一个节点
4.lastChild:获取某一节点下子一级的 最后一个节点
5.firstElementChild:获取某一节点下子一级 第一个元素节点
6.lastElementChild:获取某一节点下子一级 最后一个元素节点
7.nextSibling:获取某一个节点的 下一个兄弟节点
8.previousSibling:获取某一个节点的 上一个兄弟节点
9.nextElementSibling:获取某一个节点的 下一个元素节点
10.previousElementSibling:获取某一个节点的 上一个元素节点
11.parentNode:获取某一个节点的 父节点
12.attributes:获取某一个 元素节点 的所有 属性节点
nodeType
nodeType:获取节点的节点类型,用数字表示
console.log(eleNode.nodeType) // 1
console.log(attrNode.nodeType) // 2
console.log(textNode.nodeType) // 3
nodeType === 1 就表示该节点是一个 元素节点
nodeType === 2 就表示该节点是一个 属性节点
nodeType === 3 就表示该节点是一个 注释节点
nodeName
nodeName:获取节点的节点名称
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text
元素节点的 nodeName 就是 大写标签名
属性节点的 nodeName 就是 属性名
文本节点的 nodeName 都是 #text
nodeValue
nodeValue: 获取节点的值
console.log(eleNode.nodeValue) // null
console.log(attrNode.nodeValue) // 我是 ul 的一个属性
console.log(textNode.nodeValue) // 换行 + 空格
元素节点没有 nodeValue
属性节点的 nodeValue 就是 属性值
文本节点的 nodeValue 就是 文本内容
创建一个节点
createElement:用于创建一个元素节点
向页面中加入一个节点
appendChild:是向一个元素节点的末尾追加一个节点
语法: 父节点.appendChild(要插入的子节点)
insertBefore:向某一个节点前插入一个节点
语法: 父节点.insertBefore(要插入的节点,插入在哪一个节点的前面)
获取特殊元素的方式
1、document.head
console.log(document.head);
2、document.body
console.log(document.body);
3、document.title 拿到title里面的内容
console.log(document.title);
4、 document.documentElement html标签
console.log(document.documentElement);
5、通过name属性获取元素
console.log(document.getElementsByName("username"))