DOM是客户端javascript最重要的部分。包括以下几块内容：
- DOM的节点类型
- DOM的对象属性
- DOM的节点操作：增、删、改、查
- DOM事件
DOM节点类型：
- 文档：文档本身 document。
- 元素：标签 。如 <body></body>、<p></p>
- 属性：标签中的属性。如 <form method="" action="">中的method、action
- 文本: 页面中的文本。如<p>text</p>中的文本text
- 注释：/* zhushi */。
常用DOM的对象属性/方法
- getAttribute/setAttribute 可以设置dom对象的属性，支持IE 8+浏览器。通过dom.attributes.nodeValue同样可以获取属性的值，兼容性未知
- hasAttribute("attr") 判断是否存在attr属性
- removeAttribute()/ removeAttributeNode(attrNode) 删除指定属性。removeAttributNode会返回删除的属性节点。
- hasAttributes() 判断是否存在属性
- id 当前节点id
- className 当前节点class
- clientWidth/clientHeight 可视区域宽/高
增删改查：
- parentNode 可以获取父节点
- firstChild/lastChild/childNodes 可以获取子节点，childNodes获取nodeList。
- nextSibling／previousSibling获取 下一个/前一个 兄弟节点
- appendChild(DOM object)
- cloneNode(deep) // deep：true/false 。判断是否深度克隆
- removeChild()
- replaceChild()
- ele.getElementById("id")
- ele.getElementsByTagName("tagName")
- ele.getElementsByName("name")
- ele.getElementsByClassName("className") // ie9＋
- ele.querySelect("css选择器") // ie8+
- ele.querySelectAll("css选择器")
tips:
- 一个元素的name和id最好不同。getElementById 和 getElementsByName在部分浏览器中会同时访问id和name。
- querySelect/querySelectAll 与 jQuery选择器的差别：
- querySelect/querySelectAll是查找所有符合当前条件的节点，再根据调用元素进行筛选。
- jQuery是元素的逐级查找。
- querySelectorAll 返回的是一个static node list，而getElementsBy 返回的是一个 live node list。下面的demo 2将导致无限循环
-
var ul = document.getElementsByTagName("ul")[0]; // demo1 var list = ul.querySelectAll("li"); for(var i = 0; i < list.length; i++){ var li = document.createElement("li"); ul.appendChild(li); } // demo2 var list = ul.getElementsByTagName("li"); for(var i = 0; i < list.length; i++){ var li = document.createElement("li"); ul.appendChild(li) }
事件：
1. dom 0级事件（dom.onclick）只能绑定一次，而dom 2级事件（addEventListener）可以绑定多次
2. 当同一类型事件绑定多次时，addEventListener按照添加顺序执行。attachEvent按添加顺序倒序执行
3. 在addEventListner中，通过event对象拥有以下属性、方法
- target
- type
- stopPropagation()
- preventDefault()
4. 在attachEvent中，event对象拥有以下属性、方法
- srcElement
- type
- cancelBubble（默认为false，设置为true可以取消冒泡）
- returnValue（默认为true，设置为false可以阻止默认行为）
夸浏览器的事件处理程序
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false)
} else if (element.attachEvent) {
element.attachEvent(‘on‘ + type, handler)
} else {
element[‘on‘ + type] = handler
}
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false)
} else if (element.detachEvent) {
element.detachEvent(‘on‘ + type, hander)
} else {
element[‘on‘ + type] = null
}
}
}
时间： 2024-08-09 20:44:25