浅讲JavaScript的DOM操作

DOM简介

DOM的英文名是Document Object Model，直译就是文档对象模型。那么你现在正在阅读的文档就是一个"对象"，对象是有属性和方法的。

DOM是HTML文档的标准方法，HTML是由节点构成的

图一

在这里插入图片描述

HTML的”属性“

HTML可以看成是一个组合对象"，它由图一中各个节点对象组合而成的，节点分为：

1.元素节点：如图一的html，body，head，p，meta。
2.文本节点：向用户展示内容，如图一的li
3.属性节点：a节点的href链接属性

节点是由内置对象document获取的

（1）通过document内置对象以下方法可以获得节点的名字

图二

2

那以下HTML代码，怎么根据图二的三个不同方法分别获取节点中的元素呢？？？

 <input type="checkbox" name="hobby" id="hobby1">  音乐
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全选" id="button1">
  <input type="button" value = "全不选" id="button1">

答案很简单，分别通过id，name和标签获取就可以了

//通过id获取单个元素
$ var hobby = document.getElementById("hobby1");
//通过标签获取多个元素
$ var hobby = document.getElementsByTagName("input");
//通过name获取多个元素
$  var hobby = document.getElementsByName("hobby");

（2）获取了节点之后，可以通过document操作以下方法得到节点的属性

图三

3

简单代码演示

       for(var i=0; i<hobby.length; i++){
         document.write(hobby[i].nodeName+"<br>");
         document.write(hobby[i].nodeValue+"<br>");
         document.write(hobby[i].nodeType+"<br>");
     }

（3）把html当做一颗树的话，那么节点组成了节点树，可以用document来遍历节点树，下面是遍历方法

图四

4

下面代码如何用图三的方法获取子节点呢？？？

 <div id="con">
  javascript  
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>

先使用前面讲解的内容获取<div>标签元素，紧跟数组[0]表示是第一个子孩子（一个HTML文档中可能会有多个div标签），获取的是第一个子节点

$ var div = document.getElementsByTagName("div")[0].childNodes;

firstChild和lastChild分别是第一个子节点和最后一个子节点，分别相当于数组的[0]和[div.length-1];

HTML的”方法“

在HTML中新增一个节点，例如说新增一个H2标题节点。如图四是document管理各个节点的方法

图五

5

下面简单的演示，想要在<ul>节点下新增一个新的<li>文本节点，

<ul id="ui">
  <li>JavaScript</li>
  <li>HTML</li>
</ul> 

先获取<ui>节点，然后创建的新的节点元素添加到ui中

 var ui = document.getElementById("ui"); 
 var newli = document.createElement("li");
 newli.innerHTML="PHP";
 ui.appendChild(newli);

总结

使用DOM操作HTML就讲到这里了，与其说是操作HTML，不如说是操作HTML这个组合对象下的节点对象。

也可以将HTML看成是一个容器，所有的节点对象在这个容器里被管理，当然，这样说也不太严谨，但是晚饭为了更好的理解，就酱解释啦~~~

公众号

欢迎关注，微信公众号，获取最新文章

晚饭带你学Java