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. 将Tomcat加入windows系统服务

    将Tomcat加入windows系统服务 将Tomcat加入服务 1.修改bin目录中的service.bat: REM 添加下面的一行 set CATALINA_HOME=%cd% 如果从来没有安装 ...

  2. C#数据结构选择

    选择一个合适的数据结构会对程序的性能有着显著的提高 线性表和链表: 1.LinkedList<T>:适合于元素数组不固定,存在大量列表的头尾添加动作场合.其它可使用List<T> ...

  3. ChartServices Dev图形封装

    .工具类ChartServices using System; using System.Data; using System.Drawing; using DevExpress.XtraCharts ...

  4. TCP/IP协议和HTTP协议 浩哥指教

    TCP和IP在HTTP协议的上层,HTTP算是应用层,IP协议建立的是电脑跟电脑之间的联系,具体过程是,物理上,通过网线,解析MAC地址,到达路由,路由告诉数据将要去哪里,对方电脑通过NDS解析,解析 ...

  5. ASP.NET ashx实现无刷新页面生成验证码

    现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...

  6. 数据库(SQL SERVER)常用知识点

    1,连接数据库字符串 Data Source=192.168.1.249;Initial Catalog=bbx_uf_jiekou;User ID=sa;Password=123 Data Sour ...

  7. Quartz.Net与MVC结合定时任务

    1.首先,我们打开Visual Studio 2015,创建一个ASP.NET MVC的Web应用程序项目. 2.然后通过程序包管理器控制台来安装Quartz.Net组件. Quartz.Net一个最 ...

  8. 易学PHP——PHP基础知识

    PHP 语言标记 因为 PHP 是兼容当时的主流语言,所以 PHP 有四种标记方式: <?php PHP 代码 ?>.这是 PHP 最为正宗的语言标记,称为标准风格标记.XML 风格标记等 ...

  9. Android应用：横竖屏切换总结

    眨眼间,已经到了2016你年春节前,离上一篇博客的时间已经有6个月多,回想起这半年的种种,不得不说,学习和工作实在是太忙了,或许这就是程序员的真实写照吧. 写博客之初,主要的目的还是为了把自己的学习痕 ...

  10. requirejs+angularjs搭建SPA页面应用

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...