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. OpenVPN 通过服务器上网

    在Windows环境中架设OpenVPN服务相对比较简单,网上这方面的教程也比较丰富,照葫芦画瓢即可.但是大部分教程都只讲了如何将client与Server通过VPN管道连接起来,使client可以正 ...

  2. 来自MarsEdit的博客测试

    使用MarsEdit编辑的第一个测试博客. 希望我们一帆风顺! 插图,在插图时可以调整尺寸:   六种公式写法,记得要在选项中打开-启用数学公式: \begin{equation}\sum\end{e ...

  3. SVN使用总结

    ## 常用命令 建立分支 --- svn copy/cp svn cp http://example.com/repos/myproject/trunk http://example.com/repo ...

  4. myeclipse 10打开status.xml 卡死

    myeclipse里面的struts.xml的插件格式和要打开的文件格式不一样. 右键struts.xml   >    Open With  >  MyEclipse XML Edito ...

  5. json_encode中文unicode的问题

    近期做微信卡券开发遇到一个问题,创建卡券post数据给服务器时返回data format error, do NOT use json unicode encode (/uxxxx/uxxxx), p ...

  6. 通过统计用户DNS解析记录，实现监控用户上网行为

    上次通过扫描抓包分析TTL的方式检测公司网络开放的端口,发现没有开放53端口(DNS),也就是在公司内部的主机只能用服务器自动分配的DNS,并且发现这是台内部服务器.今天发现bing上不去,检测后发现 ...

  7. Linq学习工具及Lamada表达式

    好东西.转载一个.以备学习 Linq学习工具:     http://www.linqpad.net/ Lamada表达式: Func<int, int, int> IntPow = (x ...

  8. app快速开发

    最近由于工作的原因,公司要开发和系统相应的app, 所以了解了一些这方面的内容.(非原生android  IOS  开发) 借用其他网站提供的平台. www.apicloud.com

  9. if else 的令人防不胜防的奇葩错误

    if(a==t && b+c >a)  else flag=false; 这个语句乍一看没什么问题,如果a==t 成立b+c >a不成立-〉flag=false; 但是编译 ...

  10. 用ADMM求解大型机器学习问题

    [本文链接:http://www.cnblogs.com/breezedeus/p/3496819.html,转载请注明出处] 从等式约束的最小化问题说起:                       ...