javaScript 原生DOM节点操作（最实用的dom节点操作大全）

憧憬博客

发布于 2020-07-20 17:10:48

1.7K0

发布于 2020-07-20 17:10:48

文章被收录于专栏：憧憬博客分享憧憬博客分享

简单介绍一下DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型，例如我们写的html文件实际上是一个文档文件，通过我们的浏览器把它编译成了一个对象模型，这个模型就是document对象。
DOM 以树结构表达 HTML 文档。就好像是一个家族谱，有父级元素也有对应的子级元素，那么document对象就是我们最大的父级元素。
如下图，家族谱上面的每一个元素都是一个节点，通过对这些节点的操作，我们可以对这个页面为所欲为。

节点的分类

元素节点
属性节点
文本节点

节点的操作

元素节点操作

通过元素的id来获取相应的节点 document.getElementById("");
通过元素的标签名来获取节点 document.getElementsByTagName("");
通过元素的类名来获取节点 document.getElementsByClassName("");
通过元素的name属性来获取节点 document.getElementsByName("");
获取元素的所有子节点 node.childNodes;
创建元素节点 document.createElement("tagName");
往父节点最后添加子节点 fatherNode.append(childNode);
删除元素节点 fatherNode.removeChild(childNode);
替换节点 fatherNode.replaceChidl(newNode,oldNode);

注意：除了通过id选择节点的方式拿到的是一个确定的节点，其余的方式拿到的都会是一个数组，那么获取数组里面对应的节点需要用索引来取并且在Elements后面有s 例如：var body = document.ElementsByTagName("body")[0] ("fatherNode"表示父节点，"childNode"表示子节点)

属性节点操作

添加属性节点 node.setAttribute('attr',"attrValue");
删除属性节点 div.removeAttribute("attr");
修改属性节点 div.setAttribute("attr","new");
获取属性节点 div.getAttribute("style");

文本节点操作

创建文本节点 var textNode = document.createTextNode("hello");
获取文本节点 var textNode = div.childNodes[0];
删除起始位置开始的num个值 textNode.deleteData(starNum,num);
尾部添加内容 textNode.appendData("后面哦");
中间插入内容 te.insertData(1,"中间哦");

innerHTML 和 innerText的区别

innerHTML

<body>
    <div id="div"></div>
    <script type="text/javascript">
        var div = document.getElementById("div");
        div.innerHTML = "<h1>hello</h1>";
    </script>
</body>

innerText

<body>
    <div id="div"></div>
    <script type="text/javascript">
        var div = document.getElementById("div");
        div.innerText = "<h1>hello</h1>";
    </script>
</body>

看出来了吧，innerHTML和innerText是有本质上的区别的，innerHTML写入的内容可以解析成标签，而innerText写入的内容只能当作是文本在浏览器中显示。简单讲，innerHTML可以在某种特定环境下重构某个元素节点的DOM结构，而innerText只能修改文本值

总结

原生的DOM节点操作还是非常简单实用的，除了单词长了一点以外好像也没有什么明显的缺点，当然当我们刚开始使用DOM节点操作的时候，还是会遇到一些坑的。最容易出错的地方就是document.getElements这里了，因为这里返回的是一个数组，记住是一个数组，而不是一个节点对象，所以一定要在数组的后面加上其对应的节点的索引值，就算这个数组里面只有一个元素，他还是一个数组。把这里搞清楚剩下的就是靠大家的细心了，有一些操作是针对父级节点的，例如node.appendChild()，还有很多，一定要分清楚父级节点和子级节点的关系，才能玩转DOM节点操作。祝大家学习顺利，新年快乐！！！