DOM节点
一般来说分为三大类
元素节点(标签)
通过getElementBy.....获取的节点
文本节点(标签内的文字)
通过innerText获取的节点
属性节点(标签上的属性)
通过getAttribute获取的节点
获取节点
获取某一节点下,所有的子一级节点(获取到的是一个伪数组)
语法
元素.childNodes
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('div')
console.log(a.childNodes) //打印值为伪数组[text, p, text, span, text, h1, text]
</script>
复制代码
获取某一节点下,所有的子一级元素节点(所有的标签)
语法
元素.children
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('div')
console.log(a.children) //打印值为伪数组[p, span, h1]
</script>
复制代码
获取某一节点下,子一级第一个节点(不会回区分节点类型)
语法
元素.firstChild
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('div')
console.log(a.firstChild) //因为元素子一级第一节点为文本节点(空格.换行也属于一个节点)所以打印值为#text
</script>
复制代码
获取某一节点下,子一级最后一个节点(不会回区分节点类型)
语法
元素.lastChild
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('div')
console.log(a.lastChild) //因为元素子一级最后节点为文本节点(空格.换行也属于一个节点)所以打印值为#text
</script>
复制代码
获取某一节点下,子一级第一个元素节点(第一个标签)
语法
元素.firstElementChild
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('div')
console.log(a.firstElementChild) //因为元素子一级第一个元素节点(第一个标签)是 p 标签所以打印值为<p>你好</p>
</script>
复制代码
获取某一节点下,子一级最后一个元素节点
语法
元素.lastElementChild
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('div')
console.log(a.lastElementChild) //因为元素子一级最后一个元素节点(最后一个标签)是 h1 标签所以打印值为<h1>js是最优美的语言</h1>
</script>
复制代码
获取兄弟节点
获取对应的下一个兄弟节点
语法
元素.nextSibling
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('span')
console.log(a.nextSibling)//因为元素对应的下一节点为文本节点(空格.换行也属于一个节点)所以打印值为#text
</script>
复制代码
获取对应的上一个兄弟节点
语法
元素.previousSibling
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('span')
console.log(a.previousSibling)//因为元素对应的上一节点为文本节点(空格.换行也属于一个节点)所以打印值为#text
</script>
复制代码
获取对应的下一个兄弟元素节点
语法
元素.nextElementSibling
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('span')
console.log(a.nextElementSibling)//因为元素对应的下一元素节点(下一标签) h1 为所以打印值为<h1>js是最优美的语言</h1>
</script>
复制代码
获取对应的上一个兄弟元素节点
语法
元素.previousElementSibling
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('span')
console.log(a.previousElementSibling)//因为元素对应的上一元素节点(下一标签) p 为所以打印值为<p>你好</p>
</script>
复制代码
获取父级节点
语法
元素.parentNode
<div>
<p>你好</p>
<span>我是测试</span>
<h1>js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('h1')
console.log(a.parentNode)//因为元素的父节点是 div 所以打印内容是
//<div>
//<p>你好</p>
//<span>我是测试</span>
//<h1>js是最优美的语言</h1>
//</div>
</script>
复制代码
获取元素的所有属性节点
语法
元素.attributes
<div>
<p>你好</p>
<span>我是测试</span>
<h1 id="dkl" class="ijkkls" test="xjzzk">js是最优美的语言</h1>
</div>
<script>
var a = document.querySelector('h1')
console.log(a.attributes)//打印值为{0: id, 1: class, 2: test, id: id, class: class, test: test, length: 3}
</script>
复制代码
节点属性
nodeType (节点类型)
节点中的一个属性,能够区分当前节点类型
语法
元素.nodeType
返回值为 1 时为 元素节点
返回值为 2 时为 属性节点
返回值为 3 时为 文本节点
nodeName (节点名称)
语法
元素.nodeName
返回值
- 元素节点:大写的标签名
- 属性节点:text (属性名)
- 文本属性:#text
nodeValue (节点的值)
语法
元素.nodeValue
返回值
元素节点:没有nodeValue也就会输出null
属性节点:对应的属性值
文本节点:对应的文本内容
