DOM 基础操作

[文章标题：DOM 基础操作] [202012-31 10:14::00]

博文总目录

1. 访问DOM元素

1. 根据 元素 ID 获取元素

   document.getElementById("元素id");
   

2. 根据 name 属性回去元素

   document.getElementsByName("name属性值"); // 获取到的是具有该name值的  数组 
   

3. 根据标签名获取元素

   document.getElementsByTagName("标签名");
   

4. 根据类名获取元素

   document.getElementsByClassName("类名");
   

2. DOM树的增删改操作

2.1添加节点

var img = document.createElement("img"); // 创建标签
img.setAttribute("src","../lagou-html/img/cat.gif"); // 设置标签属性
var divs = document.getElementsByTagName("div"); // 获取要插入位置的父元素
divs[0].appendChild(img); // 将新创建的元素作为 子元素 插入到父节点中 

2.2 删除节点

var img = document.getElementById("cat");  // 获取要删除的节点
img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点

2.3 替换节点

oldE.parentNode.replaceChild( newE, oldE );  

注意：增加、删除和替换 都只能在父元素上进行，所以要首先通过节点的 parentNode 属性获得 父节点。

2.4 修改节点的内容

• 改变 HTML 内容

  node.innerHTML=“xxx”

  node.innerText=“xxx”

• 改变 HTML 属性

  node.setAttribute(“属性名”, “属性值”)

  node.属性名= “xxx” // 不推荐

• 改变 CSS 样式

  node.style.backgroundColor=“red” // style之后跟css属性 设置的是内联样式

  node.className=“类名” // 设置类名

• 改变事件（处理程序）

3. DOM中的事件

3.1 常用事件

窗口事件：onload【加载完成】

表单元素事件：onfocus【获得焦点】、onblur【失去焦点】、onchange【value改变】

鼠标事件：onclick【点击事件】、ondbclick【双击事件】、onmouseover【鼠标悬停】、onmouseout【鼠标移出】

键盘事件：onkeydown【有键键按下】、onkeyup【有键弹起】、onpress【有键按下并弹起】

3.2 事件的多种绑定方式

1. 方式一：通过元素属性绑定

<div class="cc" onclick="fun1()"></div> 
<script>
    function fun1(){    
        console.log(this);  		// this 表示 window
        console.log(event.target);  // event 有效
    }
</script>

2. 方式二：通过js代码，为onclick属性赋值

// 匿名函数
document.getElementById("div2").onclick=function(){
    console.log(this); 						// 表示 事件元素
    console.log(event.target);  			// event 有效
}
// Lambda 表达式
document.getElementById("div2").onclick=()=>{
    console.log(this);						// 表示 window
    console.log(event.target);  			// event 有效
}

3. 方式三：通过addEventListener函数添加

// 匿名函数
document.getElementById("div2").addEventListener("click", function(){
    console.log(this); 						// 表示 事件元素
    console.log(event.target);  			// target 有效
});
// Lambda 表达式
document.getElementById("div2").addEventListener("click", ()=>{ 
    console.log(this); 						// 表示 事件元素
    console.log(event.target);  			// target 有效
});

总结：

​ 最好通过 addEventListener 函数添加 匿名函数，event 在任何一种方式中都有效。

3.3 事件冒泡 与 事件捕获

事件冒泡：

​ 以点击事件为例，如果子元素和符元素同时都监听了点击事件，当点击子元素时，首先子元素的点击事件会向应，然后父元素在向应。如要若要阻止事件冒泡，可在子元素的回调函数中 添加 ： event.stopPropagation() ；这样点击子元素，父元素事件就不会被触发。

事件捕获：

node.addEventListener("click",function(){},true);

为元素绑定事件时，设置第三个参数 true ，表示使用事件捕获。效果就是点击子元素时，先触发父元素的点击事件，再触发子元素的点击事件。