DOM以及常见操作

野性酷女 2022-03-22 04:24 188阅读 0赞

什么是DOM?  
DOM是HTML文档对象模型（HTML）定义的一套标准方法，用来访问和操作HTML文档。  
DOM是以树状结构组织HTML文档的，根据DOM,HTML每个标签或元素都是一个节点

*  整个文档是一个文档节点
 *  每个HTML标签都是一个元素节点
 *  包含在HTML元素中的文本都是文本节点
 *  每一个HTML属性都是一个属性节点
 *  注释属于注释节点

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]  
当网页被加载时，浏览器会自动创建页面的文档对象模型（DOM）,构造了文档对象树，通过可编程的对象模型，JavaScript就可以动态的控制或者说操作创建HTML文档

*  改变页面中的HTML元素
 *  改变页面中的HTML属性
 *  改变页面中的CSS样式
 *  对页面中的事件作出反应

DOM: Core DOM ,XML DOM 和 HTML DOM 三部分组成。

**查找HTML元素**

*  通过id查找HTML元素。用方法：document.getElementById(id\_name);
 *  通过标签名查找HTML元素。用方法：getElementsByTagName(tag\_name);
 *  通过类名查找 HTML 元素getElementsByClassName(class\_name)

获取子元素&兄弟元素&父元素

element.childNodes: 获取指定元素的子节点,包括文本节点、元素节点等
    element.children: 获取指定元素的子元素,只会获取元素节点。
    element.nextSibling: 获取指定元素的下一个兄弟节点
    element.nextElementSibling: 获取指定元素的下一个兄弟元素
    element.previousSibling: 获取指定元素的上一个兄弟节点
    element.previousElementSibling: 获取指定元素的上一个兄弟元素
    element.parentNode: 获取元素的父节点,父节点肯定是一个元素

获取第一&最后一个子元素

element.firstChild: 获取指定元素下面的第一个子节点
    element.firstElementChild: 获取指定元素下面的第一个子元素
    element.lastChild: 获取指定元素下面的最后一个子节点
    element.lastElementChild: 获取指定元素下面的最后一个子元素

**节点操作**

克隆节点 - cloneNode()

参数:布尔值,
    true代表深层克隆,把当前节点和内部所有节点都复制一份
    false代表浅层克隆,只复制当前节点

添加节点 - appendChild()

father.appendChild(son)

插入节点 - insertBefore()

father.inserBefore(son1_new,son2_old): 将son1插入到father节点下的son2前面

移除节点 - removeChild()

father.removeChild(son): 将father下的son节点移除

**创建结构**

document.write() 
    特点:只能被document调用,而且会覆盖页面上原有内容
    
    element.innerHtml 
    特点:往页面添加html标签,可以限定范围
    
    document.createElement() 
    特点:动态创建标签,添加到页面需要配合appendChild使用

**标签的自定义属性操作**  
设置标签属性: setAttribute()

box.setAttribute("id","aaa");// 有规定的属性可以设置 
    box.setAttribute("bbb","ccc");// 没有规定的属性也可以设置

获取标签属性:getAttribute()

box.getAttribute("id");// 有规定的可以获取 
    box.getAttribute("aaa"); // 没有规定的也可以获取

移除标签属性:removeAttribute()

box.removeAttribute("id"); // 有规定的可以删除 
    box.removeAttribute("aaa"); // 没有规定的也可以删除

示例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
       function hh(){
    	   var hText=document.getElementById("fruit").getAttribute("src");
    	   alert("图片的路径是："+hText);
       }
       function check(){
    	   var favor=document.getElementsByName("enjoy");
    	   var like="你喜欢的水果是：";
    	   for(var i=0;i<favor.length;i++){
    		   if(favor[i].checked==true){
    			   like+="\n"+favor[i].getAttribute("value");
    		   }
    		   
    	   }
    	   alert(like);
       }
       function change(){
    	   var imgs=document.getElementsByTagName("img");
    	   imgs[0].serAttribute("src","images/orange.jpg");
       }
       
       
       
    </script>
    </head>
    <body>
    <img src="images/fruit.jpg" alt="水果图片" id="fruit"/>
    <h1 id="love">选择你喜欢的水果</h1>
    <input name="enjoy" type="checkbox" value="apple"/>苹果
    <input name="enjoy" type="checkbox" value="banana"/>香蕉
    <input name="enjoy" type="checkbox" value="grape"/>葡萄
    <input name="enjoy" type="checkbox" value="pear"/>梨
    <input name="enjoy" type="checkbox" value="watermelon"/>西瓜
    
    <br/><input name="btn" type="button" value="显示图片路径" onclick="hh()"/>
    <br/><input name="btn" type="button" value="喜欢的水果" onclick="check()"/>
    <br/><input name="btn" type="button" value="改变图片" onclick="change()"/>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70 1]

改变HTML CSS样式  
CSS在页面中应用非常频繁，使用这些样式可以实现页面中不同样式的特效，但是这些特效都是静态的，不能随鼠标或键盘实现 动态的改变。比如购物时，鼠标移动到指定商品会出现样式上的变化  
那么如何实现CSS样式变化呢？

一是使用样式的style属性，二是使用样式的className属性。  
在HTML DOM 中，style是一个对象，代表一个单独的样式声明，可从应用样式的文档或元素访问style对象，语法如下：

document.getElementById("  "),style.样式属性=“值”；

但是要注意，JavaScript使用CSS样式和在HTML中使用CSS 会有些不同，比如属性，font-size在HTML中可以使用，JavaScript不行，因为\*\*“ -”\*\*符号在JavaScript中是减号，在JavaScript中应该是fontSize

在css中有样式.example。代码如下：

.example {
    color: #fff;
    font-size 1em;
    text-align: right;
    }

要用JavaScript动态的应用到网页上，可以使用如下类似的代码：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]: /images/20220322/276dd11cad394613a58489df32ecb687.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70 1]: /images/20220322/54ba8bba31ba41de9a7d143847037cda.png