Javascript Dom 相关知识整理
2015-04-02 23:51
357 查看
一、选择器
document.getElementById
document.getElementsByTagName
document.getElementsByClassName(IE 9)
document.getElementsByName
document.querySelector(IE 8)
document.querySelectorAll
querySelector和getElementBy系列的不同之处:
1. querySelector 属于W3C的Selectors API 规范,getElementBy 属于W3C的DOM API 规范
2. querySelector 被IE 8+浏览器支持,getElementsByClassName 被IE 9+支持
3. querySelector接收CSS选择器作为参数
4. querySelectorAll 返回的是一个static node list,而getElementsBy 返回的是一个 live node list。下面的demo 2将导致无限循环
二、DOM对象的属性
1. getAttribute和setAttribute可以设置dom对象的属性,支持IE 8+浏览器。通过dom.attributes.nodeValue同样可以获取属性的值,兼容性未知
2. parentNode可以获取父节点
3. firstChild、lastChild、childNodes可以获取子节点
4. nextSibling获取已知节点的下一个节点,previousSibling获取已知节点的上一个节点
三、DOM对象的方法
1. appendChild() 添加节点
2. cloneNode() 复制节点
3. insertBefore() 在当前节点的指定子节点之前插入
4. removeChild() 删除节点
5. replaceChild() 替换节点
四、事件
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可以阻止默认行为)
夸浏览器的事件处理程序
document.getElementById
document.getElementsByTagName
document.getElementsByClassName(IE 9)
document.getElementsByName
document.querySelector(IE 8)
document.querySelectorAll
querySelector和getElementBy系列的不同之处:
1. querySelector 属于W3C的Selectors API 规范,getElementBy 属于W3C的DOM API 规范
2. querySelector 被IE 8+浏览器支持,getElementsByClassName 被IE 9+支持
3. querySelector接收CSS选择器作为参数
4. querySelectorAll 返回的是一个static node list,而getElementsBy 返回的是一个 live node list。下面的demo 2将导致无限循环
var ul = document.querySelectorAll('ul')[0], lis = ul.querySelectorAll("li"); for(var i = 0; i < lis.length ; i++){ ul.appendChild(document.createElement("li")); } // Demo 2 var ul = document.getElementsByTagName('ul')[0], lis = ul.getElementsByTagName("li"); for(var i = 0; i < lis.length ; i++){ ul.appendChild(document.createElement("li")); }
二、DOM对象的属性
1. getAttribute和setAttribute可以设置dom对象的属性,支持IE 8+浏览器。通过dom.attributes.nodeValue同样可以获取属性的值,兼容性未知
2. parentNode可以获取父节点
3. firstChild、lastChild、childNodes可以获取子节点
4. nextSibling获取已知节点的下一个节点,previousSibling获取已知节点的上一个节点
三、DOM对象的方法
1. appendChild() 添加节点
2. cloneNode() 复制节点
3. insertBefore() 在当前节点的指定子节点之前插入
4. removeChild() 删除节点
5. replaceChild() 替换节点
四、事件
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 } } }
相关文章推荐
- JavaScript 页面坐标相关知识整理
- JavaScript 页面坐标相关知识整理
- JavaScript就这么回事 (JS基础知识整理)
- 表单相关特效整理 javascript
- SQL 注入露洞相关知识整理
- JavaScript相关知识
- 整理:个人知识管理相关链接
- 短信相关知识整理
- DataGridView相关知识[整理]
- 技术族谱:软件开发相关知识体系的整理心得(图)
- JavaScript就这么回事 (JS基础知识整理)
- javascript中的107个基础知识收集整理 推荐
- DOM知识的翻译与整理
- (转载)技术族谱:软件开发相关知识体系的整理心得(图)
- 文件相关知识整理
- JavaScript的DOM基础知识
- 用例图相关知识及经典答复整理(持续更新)
- DOM知识的翻译与整理
- JavaScript:DOM 精简知识教程
- JavaScript针对Dom相关的优化心得