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. Ceph剖析：定时器safetimer的实现

    定时器的作用是在指定的时间执行指定的动作.SafeTimer通过multimap数据结构维护定时项,定时项是时间和事件的Pair,定时项在map中按照定时时间从小到大排列.此外,SafeTimer使用 ...

  2. [Shell] swoole_timer_tick 与 crontab 实现定时任务和监控

    手动完成 "任务" 和 "监控" 主要有下面三步: 1. mission_cron.php(定时自动任务脚本): <?php /** * 自动任务 定时器 ...

  3. [front]有效开展一个前端项目

    今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...

  4. savepic

    #-*-coding:utf-8-*-from lxml import etreeimport requestsfrom urllib import urlretrieveimport osdef g ...

  5. PHP入门教程-开发环境搭建

    1.PHP简介: PHP是能让你生成动态网页的工具之一.PHP网页文件被当作一般HTML网页文件来处理并且在编辑时你可以用编辑HTML的常规方法编写PHP. 2.学习需要基础: a.HTML b.Ja ...

  6. Swift入门学习之一常量,变量和声明

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com/cavalier-/p/6059421.html Swift入门学习之一常量,变量和 ...

  7. vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构

    今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...

  8. IIS7.5 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置，无法提供您请求的页面

    IIS7.5中将一网站应用程序池托管管道模式改为经典后,网站页面打不开,错误信息: 引用内容 HTTP 错误 404.2 - Not Found由于 Web 服务器上的“ISAPI 和 CGI 限制” ...

  9. 程序猿，千万别说你不了解Docker！

    放在两年前,你不认识Docker情有可原.但如果现在你还这么说,不好意思,我只能说你OUT了.你最好马上get起来,因为有可能你们公司很快就会引入Docker. 今天就和大家讨论讨论这个备受好评的应用 ...

  10. 封装ios静态库碰到的一些问题（一）

    封装IOS动态库,碰到的第一个问题,就是资源文件的问题,如果将你的程序封装成为静态库,那么静态库中不会包含资源文件和xib文件,这个时候就需要自己封装bundle文件了,而笔者开发环境默认是xcode ...