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

javascript DOM相关总结

时间:2015-04-14 08:27:49      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

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选择器的差别:
    1. querySelect/querySelectAll是查找所有符合当前条件的节点,再根据调用元素进行筛选。
    2. 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
        }
    }
}

  

javascript DOM相关总结

标签:

原文地址:http://www.cnblogs.com/lilijing/p/4423916.html

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