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. mysql主从不一致解决方法

    方法一:忽略错误后,继续同步 该方法适用于主从库数据相差不大,或者要求数据可以不完全统一的情况,数据要求不严格的情况 stop slave; #表示跳过一步错误,后面的数字可变 set global ...

  2. MVC 之 WebAPI 系列二

    今天,我想在此记录下 WebApi 跨域调用 1. 什么叫跨域: 跨域问题简单理解就是JavaScript同源策略的限制,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中 ...

  3. 微信公众账号开发之N个坑（二）

    上篇说到微信公众账号的几个坑,前面五个,已经说到菜单,宝宝继续往下赘述了.可惜,还不知道宝宝的宝宝到底是不是心疼宝宝呢,完了,我凌乱了... 回到正题,我们就不吐槽其他的了,上一篇说到微信的菜单了,那 ...

  4. 一个Email

    Email 1.接受表单数据并用单独变量保存起来,判断用户协议,这个是必须同意的.2.判断验证码,利用验证码类Captcha.3.判断用户名,密码,邮箱规则,利用Verify类验证.4.判断唯一性,邮 ...

  5. HTML 判断手机的类型（苹果手机安卓手机）

    function isJudege_PlatForm() { var version = navigator.appVersion; var platName = navigator.userAgen ...

  6. java UDP

    UDP 与 tcp 连接的 区别 以及  两者的不同 UDp 1 面向的是无连接的网络方式 2 传输速度快 (但是容易发生丢包 ) 3 传输的数据的大小带有的限制 一般是在64k  范围内 tcp 1 ...

  7. 当我我们用new操作符创建对象的时候，都发生了些什么？

    //下面这段代码是javascript设计模式与开发实践上的一段代码 function Person( name ){            this.name = name;        };   ...

  8. MyBatis-NET

    http://www.codeproject.com/Articles/894127/MyBatis-NET https://mybatis.github.io/mybatis-3/

  9. Android视图状态及重绘流程分析，带你一步步深入了解View(三)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17045157 在前面一篇文章中,我带着大家一起从源码的层面上分析了视图的绘制流程, ...

  10. yii打印sql

    想打印Sql的话,可以用把你要执行的命令例如queryAll(),queryOne(),execute()换成getRawSql(); 例如 : 要看$result = Yii::$app->d ...