浏览器兼容性小记-DOM篇(二)

简介:

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

1      //insertBefore,将节点插入到某一节点前面
2       var node = elementNode.insertBefore(newNode, null);
3       node === elementNode.lastChild; // true
4       var node2 = elementNode.insertBefore(newNode, elementNode.firstChild);
5       node2 === elementNode.firstChild;// true

1     // replaceNode 使用新节点替换旧子节点,返回被替换节点
2       var node = elementNode.replaceChild(newNode, elementNode.lastChild);

1     // removeChild,想要删除某节点必须通过该节点的父级元素
2       var node = elementNode.removeChild(elementNode.firstChild);
3       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中访问子节点有如下快捷方式:

1         document.documentElement // 指向<html>元素
2       document.body // 指向body元素
3       document.doctype //指向<!DOCTYPE>的引用,IE8之前将该元素当做Node.COMMENT_NODE类型,IE9、FF、Chrom将该元素作为document的第一个子节点
4       document.head || document.getElementsByTagName('head') //HTML5中新加的属性

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

1     <input type="text" name="element" />
2     <div id="element"></div>
3     // 元素a拥有name与某元素b的id重复,且在a在b之前,则调用该方法会返回a元素
4       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                //返回所有的元素子节点

目录
相关文章
|
28天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
55 1
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
JavaScript DOM 操作:如何动态创建和插入元素?
42 1
|
4月前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
42 1
|
3天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
9 0
|
3天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
9 4
|
16天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
16 4