【JavaScript】24_DOM编程:div的原型链

时间:2022-04-14 00:56:47

4、div元素的原型链

HTMLDivElement -> HTMLElement -> Element -> Node -> ...

通过元素节点对象获取其他节点的方法

element.childNodes 获取当前元素的子节点(会包含空白的子节点)

element.children 获取当前元素的子元素

element.firstElementChild 获取当前元素的第一个子元素

element.lastElementChild 获取当前元素的最后一个子元素

element.nextElementSibling 获取当前元素的下一个兄弟元素

element.previousElementSibling 获取当前元素的前一个兄弟元素

element.parentNode 获取当前元素的父节点

element.tagName 获取当前元素的标签名

<body>
<div >
我是box1
<span class="s1">我是s1</span>
<span class="s1">我是s1</span>
</div>

<span class="s1">我是s1</span>

<script>
const box1 = document.getElementById('box1')
const spans = box1.getElementsByTagName('span')
const span2 = box1.getElementsByClassName('s1')
const cns = box1.childNodes
const children = box1.children
console.log(children.length)//2,两个span标签
</script>
</body>