javaScript 原生DOM节点操作(最实用的dom节点操作大全)

简单介绍一下DOM

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

节点的分类

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

节点的操作

元素节点操作

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

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

属性节点操作

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

文本节点操作

  1. 创建文本节点
    var textNode = document.createTextNode("hello");
  2. 获取文本节点
    var textNode = div.childNodes[0];
  3. 删除起始位置开始的num个值
    textNode.deleteData(starNum,num);
  4. 尾部添加内容
    textNode.appendData("后面哦");
  5. 中间插入内容
    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>
WeChat52ae40e78399071f5f4f5ad264885320
innerText
<body>
    <div id="div"></div>
    <script type="text/javascript">
        var div = document.getElementById("div");
        div.innerText = "<h1>hello</h1>";
    </script>
</body>
WeChat9648383db9b84ec3ae07ca238050d4e8

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

总结

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

本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。

您的支持是对我最大的鼓励!

发表于: 作者:谦本

阅读此作者的 更多文章

Github 新浪微博 SegmentFault 掘金专栏