深圳网站制作公司多少钱广告支持模式的网站
DOM[文档对象模型]
节点[Node]
构成HTML文档最基本的单元
分类
- 文档节点
整个HTML文档 - 元素节点
HTML文档中的HTML标签 - 属性节点
元素的属性 - 文本节点
HTML标签中的文本内容
通过js修改元素的样式
元素.style.样式名 = 样式值
如果css的样式名中含有“-”，将“-”去掉，然后将“-”后的字母大写。
通过style属性设置和读取的都是内联样式
box1.style.marginLeft = 10+"px";
在IE中可以使用currentStyle 获取元素当前的样式。
在其他浏览器中可以使用，getComputedStyle()方法
getComputedStyle(element,pesudoElt)
- element :元素
- pesudoElt: 指定一个要匹配的伪元素的字符串，必须对普遍元素省略（或null）
事件
就是文档或浏览器窗口中发生的一些特定的交互瞬间
- getElementById
- getElementsByName
- getElementsByTagName
事件对象
在事件对象中，当事件的响应函数被触发是，浏览器每次都会将一个事件对象作为实参传递进响应函数
- clientX: 鼠标指针的水平坐标
- clientY: 鼠标指针的垂直坐标
在IE8中，响应函数被触发时，浏览器不会传递事件对象，要使用window.event【在火狐不兼容】
事件冒泡
指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。
可以通过事件对象的cancelBubble 设置为true,取消冒泡
事件委派
只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，可以尝试将其绑定给元素的共同的祖先元素。
如果要明确触发事件的对象，可利用target
<ul id="list"><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>document.getElementById('list').addEventListener('click', function(event) {console.log('你点击的是：', event.target.innerText);
});
输出示例：
• 点击“苹果”：输出 “你点击的是：苹果”
• 点击“香蕉”：输出 “你点击的是：香蕉”
解释：
• #list 是绑定事件的元素（事件监听器绑定的对象） → 事件监听器挂在父级上
• event.target 是实际点击的
- → 实际触发事件的对象
-
⸻
✅ 和 currentTarget 的区别：
• event.target → 实际触发事件的元素
• event.currentTarget → 绑定事件监听器的元素（通常是你调用 addEventListener 的那个）对比如下：
element.addEventListener('click', function(event) {console.log('target:', event.target);console.log('currentTarget:', event.currentTarget); });⸻
📌 用途：
• 事件委托（事件代理）：监听父元素的事件，通过 event.target 判断点击了哪个子元素。
• 精确控制交互行为：比如只允许点击某个 class 的按钮触发操作。⸻
🧪 小测试题：
<div id="box"><button class="btn">点击我</button> </div>document.getElementById('box').addEventListener('click', function(event) {if (event.target.classList.contains('btn')) {alert('按钮被点击了');} });事件绑定
addEventListener()通过这个方法可以为元素绑定响应函数，可以同时为一个元素的相同事件同时绑定多个
参数：- 事件的字符串，不要on
- 回调函数，当事件触发时该函数会被调用
- 是否在捕获阶段触发事件，需要一个布尔值，一般false
该方法在IE8及以下不支持addEventListener，可以使用attachEvent()
参数：- 事件字符串，要on
- 回调函数
element.attachEvent('on事件名', 回调函数);
事件传播
微软公司任务事件应该是有内像外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播。
网景公司任务事件应该是由外向内传播，即事件捕获w3c综合之后，将事件传播分成了三个阶段
- 捕获阶段
从最外层的祖先元素，向目标元素进行事件的捕获，但不会触发事件 - 目标阶段
事件捕获到目标元素，捕获结束开始在目标上触发事件 - 冒泡阶段
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true;
IE8没有捕获阶段