码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript Dom 相关知识整理

时间:2015-04-03 01:30:25      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:

 

一、选择器

 

document.getElementById

document.getElementsByTagName

document.getElementsByClassName(ie9)

document.getElementsByName

document.querySelector

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将导致无限循环

 1 var ul = document.querySelectorAll(‘ul‘)[0],
 2     lis = ul.querySelectorAll("li");
 3 for(var i = 0; i < lis.length ; i++){
 4     ul.appendChild(document.createElement("li"));
 5 }
 6 
 7 // Demo 2
 8 var ul = document.getElementsByTagName(‘ul‘)[0], 
 9     lis = ul.getElementsByTagName("li"); 
10 for(var i = 0; i < lis.length ; i++){
11     ul.appendChild(document.createElement("li")); 
12 }

 

 

二、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可以阻止默认行为)

夸浏览器的事件处理程序

 1 var EventUtil = {
 2 
 3     addHandler: function(element, type, handler) {
 4         if (element.addEventListener) {
 5             element.addEventListener(type, handler, false)
 6 
 7         } else if (element.attachEvent) {
 8             element.attachEvent(‘on‘ + type, handler)
 9             
10         } else {
11             element[‘on‘ + type] = handler
12         }
13     },
14 
15     removeHandler: function(element, type, handler) {
16         if (element.removeEventListener) {
17             element.removeEventListener(type, handler, false)
18 
19         } else if (element.detachEvent) {
20             element.detachEvent(‘on‘ + type, hander)
21 
22         } else {
23             element[‘on‘ + type] = null
24         }
25     }
26 }

 

Javascript Dom 相关知识整理

标签:

原文地址:http://www.cnblogs.com/sunken/p/4388866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!