浅谈一下javaScript中的dom

本是古典何须时尚 2023-06-27 12:49 5阅读 0赞

**1.基本概念:**  
DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件  
把XML/HTML中的所有成员描述成一个个对象(Node:Document,Element,Attri,Text). 一切皆节点  
D：文档 – html 文档 或 xml 文档  
O：对象 – document 对象的属性和方法  
M：模型  
DOM 是针对xml(html)的基于树的API。  
DOM树:节点（node）的层次。  
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）  
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70]  
**2.获取元素的三种方式:**  
①//getElementById() 返回对拥有指定 id 的第一个对象的引用。  
var div = document.getElementById(“divId”);  
print(div);  
print(div.innerHTML);  
②//getElementsByName() 返回带有指定名称的对象集合。  
var favs =document.getElementsByName(“favs”);  
print(favs);  
③//getElementsByTagName() 返回带有指定标签名的对象集合。  
var divs = document.getElementsByTagName(“div”);  
print(divs);  
**3.Node对象的属性和方法**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70 1]  
**4.属性的注意点:**  
1.元素上的原始属性和自定义属性的获取值和设置值  
操作元素的原始属性:  
获取属性值:  
元素对象.属性名;  
元素对象\[“属性名”\];  
设置属性值:  
元素对象.属性名=值;  
元素对象\[“属性名”\]=值;  
操作元素自定义属性:  
获取属性值:  
元素对象.getAttribute(“属性名”);  
设置属性值:  
元素对象.setAttribute(“属性名”,值);  
特殊情况:  
2.操作属性名和默认属性值相同的属性. 如:checked,selected,属性值是true/false.  
3.操作class属性.–>在DOM中属性名为:className  
4.操作style的属性.如:background-color—>backgroundColor  
5.操作readonly属性:readonly—>readOnly

**5.插入/追加/删除/替换节点**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106223530137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200106224832674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200106232215351.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ==,size_16,color_FFFFFF,t_70