1、DOM中的所有节点都继承自Node类型，IE9之前将DOM节点作为COM对象来实现；每个DOM节点都有一个nodeType属性来表明节点类型，总共有12个类型：

 Node.ELEMENT_NODE

 Node.ATTRIBUTE_NODE

 Node.TEXT_NODE

 Node.CDATA_SECTION_NODE

 Node.ENTITY_REFERENCE_NODE

 Node.ENTITY_NODE

 Node.PROCESSING_INSTRUCTION_NODE

 Node.COMMENT_NODE

 Node.DOCUMENT_NODE

 Node.DOCUMENT_TYPE_NODE

 Node.DOCUMENT_FRAGMENT_NODE

 Node.NOTATION_NODE

其中，1、2、3、9、10、11最常用，要确定某种元素类型可以使用以下方法：

elementNode.nodeType === Node.ELEMENT_NODE // 非IE,IE9以下无法访问Node类型

elementNode.nodeType === 1 // 所有浏览器

2、以下方法返回的都是原生的NodeList对象

 elementNode.childNodes

 document.getElementsByName()

 document.getElementsByClassName()

 document.getElementsByTagName() //返回HtmlCollection对象，与NodeList类似，多了一个namedItem('name')方法

 document.getElementsByTagNameNS()

NodeList是一种类数组对象，有length属性，但并不是Array的实例，访问NodeList中的节点对象可使用item方法或[]语法。每次访问NodeList对象实际上都是重新进行一次查询，因此通常可以将NodeList转化为数组对象。

     function nl2array(nodeList){

        var array = null;

        try{

          array = Array.prototype.slice.call(nodeList, 0);// FF

        }catch(){

          array = [];

          for (var i = 0, len = nodeList.length; i < len; i++){

             array.push(nodeList[i]);

          }

        }

        return array;

      }

3、操作DOM节点有以下的方法：

     // appendChild 讲解点添加到末尾，若该节点已在DOM结构中，则将其重新放置

      var node = elementNode.appendChild(newNode);

      node === newNode; // true

      var node2 = elementNode.appendChild(otherNode.firstChild);

      node2 === elementNode.lastChild; // true

      node2 === otherNode.firstChild; // false
      //insertBefore,将节点插入到某一节点前面

       var node = elementNode.insertBefore(newNode, null);

       node === elementNode.lastChild; // true

       var node2 = elementNode.insertBefore(newNode, elementNode.firstChild);

       node2 === elementNode.firstChild;// true
     // replaceNode 使用新节点替换旧子节点，返回被替换节点

       var node = elementNode.replaceChild(newNode, elementNode.lastChild);
     // removeChild,想要删除某节点必须通过该节点的父级元素

       var node = elementNode.removeChild(elementNode.firstChild);

       elementNode.parentNode.removeChild(elementNode);
     //cloneNode，该方法只会复制元素中的html特性，

       //IE中有一bug，他会复制元素的事件处理程序，在使用该方法时最好将事件处理程序去掉

       var node = elementNode.cloneNode(true);

       node.childNodes.length > 0 // true

       var node1 = elementNode.cloneNode(false);

       node1.childNodes.length === 0 //false

4、document对象是HTMLDocument类型的实例，所有浏览器中都可以访问HTMLDocument类型的构造函数和原型。document中访问子节点有如下快捷方式：

         document.documentElement // 指向<html>元素

       document.body // 指向body元素

       document.doctype //指向<!DOCTYPE>的引用，IE8之前将该元素当做Node.COMMENT_NODE类型，IE9、FF、Chrom将该元素作为document的第一个子节点

       document.head || document.getElementsByTagName('head') //HTML5中新加的属性

5、document.getElementById('id')，IE8及较早版本中不区分id的大小写；IE7及早期版本中有bug:

     <input type="text" name="element" />

     <div id="element"></div>

     // 元素a拥有name与某元素b的id重复，且在a在b之前，则调用该方法会返回a元素

       document.getElementById('element'); // input元素

6、所有HTML元素都是HTMLElement类型的实例，继承自Element类，比如：HTMLBodyElement、HTMLFormElement、HTMLFrameElement等，除IE外的浏览器都可以访问这些类型的构造函数及原型。IE中将comment节点作为element类型的派生类，因此调用document.getElementsByTagName('*')会将comment节点一并返回。

7、html元素有Attribute（特性）跟Property（属性）的区分。

操作特性的方法主要有getAttribute()、setAttribute()、removeAttribute()，这三个方法可以操作以HTMLElement类型属性形式定义的特性(id、class、title、lang、dir)，和自定义属性。如：<div id="element" myAttr="myself"></div> element.getAttribute("myAttr")。

属性是指该元素作为javascript对象，除以上特性外一切可以通过点语法访问的属性，如innerHTML、nodeType等。

特性可以出现在html元素声明中，属性不可以(出了也没用)；特性可以通过css属性选择符语法来查询元素，属性不可以

8、element.attributes属性是一个NamedNodeMap对象，与NodeList类似。该属性返回所有在element中声明的特性，IE中会返回所有可能的特性，但在声明的特性中有一个specified属性，该属性为true则为以声明特性。

9、IE9之前不会解析文本之间的空白节点，如下：

     <ul id="mylist">

       <li>li1</li>

       <li>li2</li>

       <li>li3</li>

     </ul>

     mylist.childNodes === 3; //IE8

     mylist.childNodes === 7; //FF

如果只想访问元素子节点可以使用如下api：

       childElementCount       //返回子元素节点个数

       firstElementChild       //第一个元素子节点

       lastElementChild        //最后一个元素子节点

       previousElementSibling  //前一个兄弟元素

       nextElementSibling      //后一个兄弟元素

       children                //返回所有的元素子节点

浏览器兼容性小记-DOM篇（二）的更多相关文章

  1. 浏览器兼容性小记-DOM篇（一）

    1.childNodes引入空白节点问题:使用childElementCount或children 2.innerText: FF中不支持该属性,使用textContent代替 3.变量名与某HTML ...

  2. 浏览器兼容性之Css篇

    本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...

  3. Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境

    如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...

  4. 浏览器兼容性之JavaScript篇

    近期公司职务变动,我大部分工作时间都在做web前端开发.工作性质主要是跟javascript和css(层叠样式表)打交道,而JavaScript兼容性一直是Web开发者的心病,当然我也不例外,虽然我大 ...

  5. javascript之DOM篇二（操作）

    一.创建DOM元素 createElement:document.createElement(' 所要创建的元素标签名'): <!DOCTYPE html><html>< ...

  6. 浏览器兼容性汇总--JavaScript篇

    目录 JavaScript中的兼容性汇总 1.        HTML对象获取问题 2.        const问题 3.        event.x与event.y问题 4.        wi ...

  7. 浏览器兼容性汇总--CSS篇

    目录 CSS篇 1.       cursor:hand   VS   cursor:pointer 2.        innerText在IE中能正常工作,但在FireFox中却不行 3.     ...

  8. Javascript-- jQuery DOM篇(二)

    DOM拷贝clone() 克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆 .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素.匹配元素的下级元 ...

  9. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

随机推荐

  1. 如何搭建一个WAMP环境

    最近的一些比赛需要用到PHP,所以急需配置一个PHP的环境,所以分享出来我的经历  一.使用wampserver 这是一个集成软件包,可以一键配置Apache+Mysql+PHP,还具有简单的图形界面 ...

  2. 安装ubuntu系统

    1. CTRL+ALT+F2 由图形界面进入命令行界面 ALT+CTRL+F7切换到图形界面 2. ubuntu12.04不会在安装时确定root的密码,需要你在后来更改密码有其他方法更改文件:在终端 ...

  3. PoEdu - C++阶段班【Po学校】- Lesson03-4_构造函数&赋值函数&拷贝构造函数&学习方式 - 第6天

    PoEdu - C++阶段班[Po学校]- 第6天 课堂选择题目: 1  关于转换构造函数  ClassDemo demo = 1;  调用转换构造函数 2  关于拷贝赋值函数  demo =2; 首 ...

  4. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  5. [06]APUE：系统数据文件和信息

    [a] getpwent / setpwent / endpwent #include <pwd.h> struct passwd *getpwent(void) //成功返回指针,出错或 ...

  6. 关于String中+与StringBuilder的问题

      字符串连接可以通过两种方法实现,其中一种是在Java中提供的一个StringBuilder类(这个类只在J2SE5及以上版本提供,以前的版本使用StringBuffer类). 字符串是Java程序 ...

  7. SQL Server客户端登录名与数据库用户关联

    数据库迁移之后,在新的SQL Server客户端工具设置关联时,往往会报错: 用户.组或角色 'XXX' 在当前数据库中已存在. 解决方法: 首先介绍一下sql server中“登录”与“用户”的区别 ...

  8. hdoj 2066 一个人的旅行

    Problem Description 虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途中 会遇见很多人(白马王子,^0^),很多事,还能丰 ...

  9. SAP项目管理模块培训教材

    SAP项目管理模块培训教材(PLM210.PLM220.PLM230)分享: http://sap.npbok.com/

  10. RestController 和Controller的区别

    restful风格,restcontroller与controller 初步接触springmvc的时候,被要求使用restful风格,彼时一头雾水,不懂何谓restful,参阅了很多资料,慢慢的接触 ...