1. 访问DOM元素
- 根据 元素 ID 获取元素
document.getElementById("元素id");- 根据 name 属性回去元素
document.getElementsByName("name属性值"); // 获取到的是具有该name值的 数组- 根据标签名获取元素
document.getElementsByTagName("标签名");- 根据类名获取元素
document.getElementsByClassName("类名");2. DOM树的增删改操作
2.1添加节点
var img = document.createElement("img"); // 创建标签
img.setAttri服务器托管网bute("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. 方式一：通过元素属性绑定
function fun1(){
console.log(this); // this 表示 window
服务器托管网 console.log(event.target); // event 有效
}
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 ，表示使用事件捕获。效果就是点击子元素时，先触发父元素的点击事件，再触发子元素的点击事件。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: 2023/8/8 下午10:42:04 objectarx
2023/8/8 下午10:42:04 objectarx 2023/8/8 下午10:42:16 ObjectARX（AutoCAD Runtime Extension）是用于开发和自定义AutoCAD软件的编程接口。ObjectARX允许开发者使用C++、…
