JavaScript DOM对象总结

落日映苍穹つ 2021-06-24 16:10 448阅读 0赞

# DOM #

Document Object Model：文档对象模型。

*  文档：超文本文档 html、xml。
 *  对象：提供了属性和方法。
 *  模型：使用属性和方法操作超文本标记型文档。

可以使用JavaScript里面DOM提供的对象，使用这些对象的属性和方法，对标记型文档进行操作。  
想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象。

*  需要把html里面所有的标签、属性、文本内容都封装成对象。

DOM如何解析HTML  
![DOM如何解析HTML][DOM_HTML]  
**HTML 文档中的所有内容都是节点：**  
• 整个文档是一个文档节点  
• 每个 HTML 元素是元素节点  
• HTML 元素内的文本是文本节点  
• 每个 HTML 属性是属性节点  
• 注释是注释节点

## 一、document对象 ##

表示整个文档。

### 方法： ###

*  `write()` 方法：
    
    1.  向页面输出变量（值）
    2.  向页面输出HTML代码
    
        document.write(str);
        document.write("<hr/>");
 *  `getElementById()`： 返回带有指定 ID 的元素。
    
        <input type="text" name="nameid" id="nameid" value="aaaaaa" />
        <script type="text/javascript"> // 使用getElementById得到input标签 var input1 = document.getElementById("nameid"); // 得到input里面的value值 document.write(input1.value); // 向input里面设置一个值 input1.value = "bbbbbbbbbbbbbbb"; </script>
 *  `getElementsByName()`： 通过标签的name的属性值得到标签。  
    返回值是一个集合（数组）。  
    示例：
    
        <input type="text" name="name1" value="aaaaaa" /><br />
        <input type="text" name="name1" value="bbbbbb" /><br />
        <input type="text" name="name1" value="cccccc" /><br />
        <input type="text" name="name1" value="dddddd" /><br />
        
        <script type="text/javascript"> // 使用getElementsByName()方法得到input标签数组 var inputs = document.getElementsByName("name1"); // 遍历inputs数组 for(var i = 0; i < inputs.length; i++) { // 每次循环得到一个input对象，保存在input1里面 var input1 = inputs[i]; //输出结果 document.write(input1.value + "<br/>"); } </script>
 *  `getElementsByTagName()`： 返回包含指定标签的所有元素的集合（数组）。  
    传递的参数是标签名字。  
    示例：
    
        <input type="text" name="name1" value="a" /><br />
        <input type="text" name="name1" value="b" /><br />
        <input type="text" name="name1" value="c" /><br />
        <input type="text" name="name1" value="d" /><br />
        
        <script type="text/javascript"> // 使用getElementsByName()方法得到input标签数组 var inputs = document.getElementsByTagName("input"); // 遍历inputs数组 for(var i = 0; i < inputs.length; i++) { // 每次循环得到一个input对象，保存在input1里面 var input1 = inputs[i]; //输出结果 document.write(input1.value + "<br/>"); } </script>

## 二、element对象 ##

要操作element对象，首先必须获取到element，使用document里面的相应方法获取。

### 方法： ###

*  **获取属性值**  
    `getAttribute()`： 返回指定属性名的属性值。
    
        <input type="text" id="inputid" value="aaaaaaaaaa" />
        
        <script type="text/javascript"> var input1 = document.getElementById("inputid"); document.write(input1.getAttribute("value")); </script>
 *  **设置属性值**  
    `setAttribute()`： 添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
    
        <input type="text" id="inputid" />
        
        <script type="text/javascript"> var input1 = document.getElementById("inputid"); input1.setAttribute("value","bbbbbbbbbb"); document.write(input1.getAttribute("value")); </script>
 *  **删除属性值**  
    `removeAttribute()` ：删除指定的属性。
    
        <input type="text" id="inputid" value="aaaaaaaa"/>
        
        <script type="text/javascript"> var input1 = document.getElementById("inputid"); input1.removeAttribute("value"); document.write(input1.getAttribute("value")); </script>
 *  **获取标签下面的子标签**  
    使用属性`childNodes`，但是这个属性的兼容性很差。  
    获取标签下面的子标签的唯一有效办法，使用：  
    `getElementsByTagName()` 返回具有指定标签名的元素子元素集合，以 NodeList 对象。
    
        <body>
        	<ul id="ulid">
        		<li>aaaa</li>
        		<li>bbbb</li>
        		<li>cccc</li>
        	</ul>
        	
        	<script type="text/javascript">
        		var ulobj = document.getElementById("ulid");
        		var lis = ulobj.getElementsByTagName("li");
        		document.write(lis.length);
        	<script>
        </body>

## 三、Node对象 ##

### 属性 ###

*  **nodeName 属性**  
    nodeName 属性规定节点的名称。nodeName 是只读的。
    
    1.  元素节点的 nodeName 与标签名相同。
    2.  属性节点的 nodeName 与属性名相同。
    3.  文本节点的 nodeName 始终是 \#text。
    4.  文档节点的 nodeName 始终是 \#document。
    
    *nodeName 始终包含 HTML 元素的大写字母标签名。*
 *  **nodeValue 属性**  
    nodeValue 属性规定节点的值。
    
    1.  元素节点的 nodeValue 是 undefined 或 null。
    2.  文本节点的 nodeValue 是文本本身。
    3.  属性节点的 nodeValue 是属性值。
 *  **nodeType 属性**  
    nodeType 属性返回节点的类型。nodeType 是只读的。  
    比较重要的节点类型有：  
    元素 `1` 、属性 `2` 、文本 `3` 、注释 `8` 、文档 `9` ……

#### 示例： ####

##### 代码： #####

<span id="spanid">liuweijia</span>
    <br /><br />
    <script type="text/javascript"> // 获取标签对象 var span1 = document.getElementById("spanid"); document.write("span的nodeType:" + span1.nodeType + "<br>"); document.write("span的nodeName:" + span1.nodeName + "<br>"); document.write("span的nodeValue:" + span1.nodeValue + "<br>"); document.write("<br />"); // 属性 var id1 = span1.getAttributeNode("id"); document.write("id的nodeType：" + id1.nodeType + "<br>"); document.write("id的nodeName：" + id1.nodeName + "<br>"); document.write("id的nodeValue：" + id1.nodeValue + "<br>"); document.write("<br />"); // 获取文本 var text1 = span1.firstChild; document.write("文本的nodeType：" + text1.nodeType + "<br>"); document.write("文本的nodeName：" + text1.nodeName + "<br>"); document.write("文本的nodeValue：" + text1.nodeValue + "<br>"); </script>

##### 输出结果： #####

liuweijia 
    
    span的nodeType:1
    span的nodeName:SPAN
    span的nodeValue:null
    
    id的nodeType：2
    id的nodeName：id
    id的nodeValue：spanid
    
    文本的nodeType：3
    文本的nodeName：#text
    文本的nodeValue：liuweijia

## 四、父节点 & 子节点 & 同辈节点 ##

**上述的html结构中：**

**父节点**： ul是li的父节点。  
`parentNode` 属性以 Node 对象的形式返回指定节点的父节点。

**子节点**：li是ul的子节点。  
`childNodes` 属性返回节点的子节点集合，以 NodeList 对象。（这个属性的浏览器兼容性非常差，不建议使用！）  
`firstChild` 属性返回指定节点的首个子节点，以 Node 对象。  
`lastChild` 属性返回指定节点的最后一个子节点，以 Node 对象。

**同辈节点**：li之间的关系是同辈节点。  
`nextSibling` 属性返回指定节点之后紧跟的节点，在相同的树层级中。  
`previousSibling` 属性返回同一树层级中指定节点的前一个节点。

### 示例： ###

#### 代码： ####

<ul id="ul_id"><li id="li_1">001</li><li id="li_2">002</li><li id="li_3">003</li></ul>
    <script type="text/javascript"> //父节点操作演示： var li1 = document.getElementById("li_1"); document.write("li_1的父节点的id是：" + li1.parentElement.id + "<br>"); // 子节点操作演示： var ulobj = document.getElementById("ul_id"); document.write("ul的第一个子节点的id是：" + ulobj.firstChild.id + "<br>"); document.write("ul的最后一个子节点的id是：" + ulobj.lastChild.id + "<br>"); // 同辈节点的演示 var li2 = document.getElementById("li_2"); document.write("li_2的前一个同辈节点的id是：" + li2.previousSibling.id + "<br>"); document.write("li_2的后一个同辈节点的id是：" + li2.nextSibling.id + "<br>"); </script>

#### 输出结果： ####

html标签的格式：

这里存在一个问题，就是**浏览器会把列表之中的空格和换行也看作为一个节点**，如果按照以上的格式写的话，获取节点的时候就会变为中间的空白，其他的也是同理。所以我们在书写的时候去掉中间的空白，这样就可以实现以下的效果。

li_1的父节点的id是：ul_id
    ul的第一个子节点的id是：li_1
    ul的最后一个子节点的id是：li_3
    li_2的前一个同辈节点的id是：li_1
    li_2的后一个同辈节点的id是：li_3

## 五、操作DOM树 ##

### 方法 ###

*  `appendChild()` 添加最后一个子节点。
 *  `insertBefore()` 在指定已有子节点之前插入新的子节点。  
    格式：`insertBefore(newItem,existingItem);`  
    newItem：要加入的节点。  
    existingItem：在谁之前加入。
 *  `removeChild()` 删除指定子节点。
 *  `replaceChild()` 用新节点替换某个子节点。  
    格式：`replaceChild(newnode,oldnode)`  
    newnode： 插入的节点对象。  
    oldnode：删除的节点对象。
 *  `cloneNode()`：复制节点。  
    格式：`cloneNode(deep)`  
    deep：Boolean类型。true，克隆节点、属性、后代。 false，只克隆节点、后代。

## 六、innerHTML 属性 ##

浏览器几乎都支持该属性，但不是DOM标准的组成部分。

*  可以获取文本的内容
    
        <span id="spanid">liuweijia</span>
        <script type="text/javascript"> var span_obj = document.getElementById("spanid"); document.write(span_obj.innerHTML); </script>
 *  向标签里面设置内容（可以是HTML代码）
    
        <div id="divid"></div>
        <script type="text/javascript"> var div_obj = document.getElementById("divid"); div_obj.innerHTML = "<h1> liuwejia </h1>"; </script>

--------------------

That is all.

[DOM_HTML]: /images/20210615/dbc6fbca30144c63bae180a50e650ffa.png