DOM的标准规范中提供了 Elementi对象,该对象提供了HTML页面中所有元素所具有的属性和方法。 DOM标准规范中提供了Node对象,主要是依靠DOM节点树结构访问和更新HTML页面的内容。 而DOM标准规范中提供了 Element对象,主要是依靠DOM元素树结构访问和更新HTML页面的内容。
<div class='container'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="d">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
var d = document.getElementById('d')
d.firstChild.nextSibling.textContent = '666'
// 获取指定节点的所有子元素
console.log('children:', d.children)
// 获取指定元素的所有子元素的个数
console.log("childElementCount", d.childElementCount)
// 获取指定节点的第一个子元素
console.log("firstChild", d.firstChild)
// 获取指定节点的最后一个子元素
console.log("lastElementChild", d.lastElementChild)
var d = document.getElementById('d')
// 获取下一个兄弟元素(获取到空白节点)
console.log(d.nextSibling)
// 获取到script脚本
console.log(d.nextSibling.nextSibling)
console.log(d.previousSibling)
console.log(d.previousSibling.previousSibling)
<p id="p1" class="text">12312321</p>
可以直接添加HTML代码
var pElement = document.getElementById('p1')
pElement.innerHTML = '<span>test<span>'