DOM节点 - 元素节点 - 会coding的HAM

<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Java</li>
</ul>

var ul = document.getElementsByTagName('ul')[0]
var li2 = ul.childNodes[3]
// 获取子节点包含文本节点会受到HTML文档中空白字符的干扰
var li2 = ul.children[1]
// children获取子元素/标签不包含空白字符
console.log(li2)
alert(li2.outerHTML)
// 获取包含本身在内的所有html代码
document.write('123')
document.write('456')
document.writeln('123')
document.writeln('456')
document.write('<pre>')
for(var k in li2){
document.writeln(k)
// 可以在</body>之前向HTML文档或当前页面写入新的文本
}
document.write('</pre>')
alert(li2.previousElementSibling.outerHTML)
// previousElementSibling 属性返回同一树层级中
// 指定节点的前一个节点
// 被返回的节点以Node 对象的形式返回
alert(li2.nextElementSibling.outerHTML)
// nextElementSibling属性返回同一树层级中
alert(li2.childElementCount)
// 子元素的数量
console.log(ul)
alert(ul.firstChild.nodeName)
alert(ul.lastChild.nodeName)
// 返回第一个或最后一个节点
alert(ul.firstElementChild.outerHTML)
alert(ul.lastElementChild.outerHTML)
// 返回第一个或最后一个元素
var newli =document.createElement('li')
// 创建一个新的标签元素
newli.innerText = 'PHP'
ul.appendChild(newli)
// 拼接子元素添加到最后一个子节点之后
var removed = ul.removeChild(ul.firstElementChild)
// removeChild 移除子节点
ul.appendChild(removed)
ul.replaceChild(removed,newli)
// 替换子节点
ul.insertBefore(removed,ul.firstChild)
// insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
// ul.insertBefore('插入内容','在...节点之前')
ul.insertAdjacentText('beforeBegin','外面的外面')
// 插入文本
// beforeBegin 在...开始之前
ul.insertAdjacentHTML('afterBegin','<li>里面的前面</li>')
// afterBegin 在...里面的前面
ul.insertAdjacentHTML('beforeEnd','<li>里面的后面</li>')
// beforeEnd 在...里面的后面
ul.insertAdjacentText('afterEnd','外面的后面')
// afterEnd 在...外面的后面
ul.insertAdjacentElement()
// 插入标签元素
// ul.insertAdjacentHTML()
// 插入代码

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论