本文小编为大家详细介绍“DOM节点怎么查询”，内容详细，步骤清晰，细节处理妥当，希望这篇“DOM节点怎么查询”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
1.DOM节点介绍
1.什么是节点
在HTML文档中，一切都是节点（HTML文档本身、标签、属性、注释内容、文本）
2.什么是元素
元素在HTML中叫做标签，在JS的DOM对象中称为元素（可以理解为标签的面向对象的叫法）
3.HTML标签属于节点的一种，叫做元素节点
4.节点三要素
节点类型：标签、属性、注释、文本
节点名称：p、div、class（标签名）
节点的值：one（属性的值）
/*
1.网页内容是由标签组成 ： 不严谨的
2.网页内容由 节点组成 ： 一切内容皆节点
元素(标签)节点 ： 例如 div标签
属性节点 ： 例如 class属性
文本节点 ： 比如标签里面的文字
注释节点 ： 比如HTML中的注释
3.DOM节点操作重点记住： 元素节点
*/
2.查询节点方法
1.查询子元素节点：父元素.children
2.查询兄弟元素节点：
上一个兄弟元素：元素.previousElementSibling
下一个兄弟元素：元素.nextElementSibling
3.查询父节点：元素.parentNode
3.节点操作
1.新增节点：document.createElement()
(1)内存 创建空标签 : let li = document.createElement('标签名')
(2)设置内容 : li.innerText = '文本'
(3)添加到dom树 : 父元素.appendChild( 子元素 )
新增到最后面 ： 父元素.appendChild(子元素)
新增到某个元素前面： 父元素.insertBefore(子元素,要加到哪个元素前面)
2.克隆节点：
克隆元素自己 ： 元素.cloneNode(false)
克隆元素自己+后代 ：元素.cloneNode(true)
3.删除节点：父元素.removeChild( 子元素 )
注意点： 元素只能移除自己的子元素
4.insertBefore实现上移与下移
<body>
<button class="btn1">新增元素到最后面</button>
<button class="btn2">新增元素到li2前面</button>
<button class="btn3">新增元素到最前面</button>
<button class="btn4">li2上移</button>
<button class="btn5">li2下移</button>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
/* 新增元素
1.只能新增到最后面 ： 父元素.appendChild( 子元素 )
2.新增到指定元素的前面： 父元素.insertBefore( 子元素,要新增到哪个元素前面 )
*/
let ul = document.querySelector('ul')//父元素
let li2 = document.querySelector('#li2')//li2
//新增元素到最后面
document.querySelector('.btn1').onclick = function(){
//新创建元素
let newLi = document.createElement('li')
newLi.innerText = '我是新来的1'
//新增到最后面
ul.appendChild(newLi)
}
//新增元素到li2前面
document.querySelector('.btn2').onclick = function(){
//新创建元素
let newLi = document.createElement('li')
newLi.innerText = '我是新来的2'
//新增到li2前面
ul.insertBefore( newLi,li2 )
}
//新增父元素到最前面
document.querySelector('.btn3').onclick = function(){
//新创建元素
let newLi = document.createElement('li')
newLi.innerText = '我是新来的3'
//新增最前面 ： 新增到原来的第一个元素的前面
ul.insertBefore( newLi, ul.children[0] )
}
//li2上移
document.querySelector('.btn4').onclick = function(){
/* 上移思路： 元素移动到它哥哥的前面 */
//判断li2是不是第一个元素，如果是则不能移动
if( li2.previousElementSibling ){
ul.insertBefore( li2, li2.previousElementSibling )
}else{
alert('已经是第一个元素')
}
}
//li2下移
document.querySelector('.btn5').onclick = function(){
/* 下移思路： 元素 移到弟弟的弟弟的前面
弟弟的后面 = 弟弟的弟弟的前面
*/
if( li2.nextElementSibling ){
ul.insertBefore(li2, li2.nextElementSibling.nextElementSibling )
}else{
alert('已经是最后一个元素')
}
}
</script>
读到这里，这篇“DOM节点怎么查询”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
