DOM(Document Object Model）

柔光的暖阳◎ 2022-01-10 16:51 173阅读 0赞

DOM（Document Object Model）：  
    结点的概念：整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容。  
    结点类型  
        1.元素结点

对于元素结点的nodeName就是标签名（大写），而nodeValue就是null或undefined(除了标签名，啥也没有，nodeValue　　　　就不可能有值)

<p id="ptag">this is a p tag</p> <script>  
      nodeObj = document.getElementById("ptag");  
      console.log(nodeObj.nodeName);//result:P(注意:是大写)  
      console.log(nodeObj.nodeValue);//result:null  
   </script>  
        2.属性结点

一个属性就是一个属性结点，例如<p id=”ptag”>this is a p tag</p> 的id属性结点表示方法就是：  
document.getElementById("ptag").getAttributeNode("id")

而属性结点的nodeName就是属性名(key)，nodeValue就是属性值(value)  
<p id="ptag">this is a p tag.</p>  
   <script>  
      nodeObj = document.getElementById("ptag");  
      idAttributeNode = nodeObj.getAttributeNode("id");  
      //从结点对象获得id属性结点  
      console.log(idAttributeNode.nodeName);//result:id  
      console.log(idAttributeNode.nodeValue);//result:ptag  
   </script>  
        3.文本结点

一个元素的子结点可以分为两类：**文本结点**和**元素结点**  
 所以文本结点就得重新定义：文本结点就是元素起始标签和闭合标签内的不加其他标签修饰的文本内容   
 因此，文本结点的nodeValue就是文本内容，而nodeName都是\#text  
     <p id="ptag">this is a p tag.</p> <script>  
      nodeObj = document.getElementById("ptag");  
      textNode = nodeObj.childNodes\[0\];//从结点对象获得文本结点  
      console.log(textNode.nodeName);//result:\#text  
      console.log(textNode.nodeValue);  
      //result:this is a p tag.  
   </script>  
  
    结点的注意点：  
        1.文本节点和属性结点都看作元素结点的子结点  
        2.我们一般所说的结点指的就是元素结点，将html标签看作是一个对象，并用“结点”称呼它  
        3.结点的关系有：父子关系、兄弟关系

![1666047-20190507203702932-1294597389.png][]

1.获取元素结点  
    1)直接获取  
                 ① document.getElementById()  
                 ② document.getElementsByName()  
                 ③ document.getElementsByTagName()  
         2)间接获取  
                父子关系  
                    firstChild   lastChild   childNodes  
                子父关系  
                    parentNode  
                兄弟关系  
                    nextSibling   previousSibling  
  
2.操作属性结点  
    1)通过对象“.”属性，来操作属性  
                    优：可以动态获取用户修改的属性值  
                    缺：不能获取自定义属性的值  
        2)getAttribute("key")  setAttribute("key","value")  removeAttribute("key")  
                    优：可以获取自定义属性的值  
                    缺：不能动态获取用户修改的属性值  
  
3.处理文本结点  
    1) 通过对象.innerText 获取标签内部的文本信息  
        2) 通过对象.innerHTML 获取标签内部的HTML代码  
  
4.动态改变DOM结构  
     1)创建一个结点对象  
               document.createElement("标签名")  
         2)（父结点）追加子结点对象  
               fatherNode.appendChild(子结点对象)  
         3)（父结点）在指定结点前添加子结点  
               fatherNode.insertBefore(新结点对象，参考结点对象)  
         4)（父结点）替换旧的子结点对象  
               fatherNode.replaceChild(新结点对象，旧结点对象)  
         5)（父结点）删除旧子结点对象  
               fahterNode.removeChild(旧结点对象)  
  
5.动态改变元素的CSS样式（不重要）  
    1)我们通过对象.style属性操作对象的css样式：样式名称中有“-”将“-”去掉，并将“-”后一个字母改为大写来作为样式的新名称  
        2)我们希望通过class为一个对象添加一个class样式，添加属性名是className，而并非class（class是js的关键字，并能作为属性名存在）

<**table id="tableid" border="1" style="border-collapse: collapse">  
<tr>  
<td>姓名</td>  
<td>年龄</td>  
<td>性别</td>  
<td>操作</td>  
</tr>  
<tr id="r1">  
<td>张三</td>  
<td>18</td>  
<td>男</td>  
<td><a href="javascript:void(0)" οnclick="*deleteRow(this)">删除</a></td>  
</tr>  
<tr id="r2">  
<td>李四</td>  
<td>19</td>  
<td>女</td>  
<td><a href="javascript:void(0)" οnclick="deleteRow(this)">删除</a></td>  
</tr>  
<tr id="r3">  
<td>王五</td>  
<td>20</td>  
<td>男</td>  
<td><a href="javascript:void(0)" οnclick="deleteRow(this)">删除</a></td>  
</tr>  
</table>***

转载于:https://www.cnblogs.com/ki16/p/10815588.html

[1666047-20190507203702932-1294597389.png]: /images/20220110/938a06a9834341c6b26cd34e97c63476.png