您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇“js常用节点操作方法有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“js常用节点操作方法有哪些”文章吧。
element.parentNode，得到的是离元素最近的父节点。如果找不到则返回为null
代码：
<body>
<div>
<div>
<div></div>
</div>
</div>
<script>
var divs=document.querySelector(".s")
console.log(divs.parentNode);
</script>
</body>效果：
element.children,是一个只读属性，返回所有子元素节点，其余节点不返回
代码：
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul=document.querySelector("ul")
console.log(ul.children);
</script>
</body>效果:
element.firstElementChild,element.lastElementChild分别返回第一个和最后一个子元素节点，IE9+
代码：
<body>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var ul=document.querySelector("ul")
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
</script>
</body>效果：
element.children[0] , element.children[element.children.length-1]分别返回第一个和最后一个子元素节点
代码：
<body>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var ul=document.querySelector("ul")
console.log(ul.children[0]);
console.log(ul.children[ul.children.length-1]);
</script>
</body>效果：
element.nextElementSibling，返回当前元素下一个兄弟元素节点，找不到则返回null
element.previousElementSiblig，返回当前元素上一个兄弟元素节点，找不到则返回null
IE9+
document.createElement()，动态创建元素节点
innerHtml，创建节点
document.write,创建节点，但导致页面重绘
fartherelement.appendChild(childelement)，将一个节点添加到指定父节点的子节点列表末尾
注意事项：创建和添加元素节点需要联合使用
1&2：
添加前代码：
<body> <ul> <li>我第一</li> <li></li> <li></li> <li></li> <li>我最后</li> </ul> <script> </script> </body>
效果：
添加后代码：
<body>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var ul=document.querySelector("ul")
var li=document.createElement("li");
ul.appendChild(li)
</script>
</body>注意：appendChild()中无引号。因为：规定变量或对象是不用加引号的
效果：
element.insertBefore(child,指定元素)，将一个节点添加到父节点指定节点前面
代码：
<body>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var ul=document.querySelector("ul")
var li=document.createElement("li");
ul.insertBefore(li,ul.children[0])
</script>
</body>效果：
element.removeChild()
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
button{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<button></button>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var button=document.querySelector("button")
var ul=document.querySelector("ul")
button.onclick=function(){
ul.removeChild(ul.children[0])
}
</script>
</body>
</html>element.cloneNode(),括号参数为空或者为false则为浅拷贝，只复制标签。括号参数为ture则复制标签和里面的内容。克隆节点需要和添加节点一起使用
以上就是关于“js常用节点操作方法有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。