// DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点;

一 DOM类型

 类型名                        说明

 Node                 表示所有类型值的统一接口,IE不支持;

 Document             表示文档类型;

 Element              表示元素节点类型;

 Text                 表示文本节点类型;

 Comment              表示文档中的注释类型;

 CDATASection         表示CDATA区域类型;

 DocumentType         表示文档声明类型;

 DocumentFragment     表示文档片段类型;

 Attr                 表示属性节点类型;

1.Node类型

 // DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现;

 // 这个Node接口在JavaScript中是作为Node类型实现的;

 // 除IE之外,在其他所有浏览器中都可以访问到这个类型;

2.Document类型

 // Document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签;

     document;                         // document;

     document.nodeType;                // 9;类型值;

     document.childNodes[0];           // DocumentType;第一个子节点对象;

     document.childNodes[1];           // HTMLHtmlElement; 对象;

     // 如果想直接得到<html>标签的元素节点对象HTMLHtmlElement,可以直接使用documentElement即可;

     document.documentElement;         // HTMLHtmlElement;

     // 很多时候需要得到<body>标签,之前常用的是:document.getElementsByTagName('body')[0];

     document.body;                    // HTMLBodyElement;

     // 在<html>之前还有一个文档声明:<!DOCTYPE>会作为浏览器的第一个节点来处理;

     document.doctype;                 // DocumentType;

     // 在Document中有一些遗留的属性和对象集合,可以快速的帮助我们精确的处理任务;

     // 属性

     document.title;                   // 获取和设置<title>标签的值;

     document.URL;                     // 获取URL路径;

     document.domain;                  // 获取域名;
　　　　// 当页面中包含来自其他子域的框架或内嵌框架时,能够设置document.domain就非常方便了;
　　　　// 由于跨域安全限制,来自不同子域的页面无法通过JavaScript通信;
　　　　// 而通过将每个页面的document.domain设置为相同的值,这些页面就可以相互访问对方的JavaScript对象了;

     document.referrer;　　　　　　　　　 // 保存着链接到当前页面的那个页面的URL;

     // 对象集合

     document.anchors;                 // 获取文档中带name属性的<a>元素集合;

     document.links;                   // 获取文档中带href属性的<a>元素集合;

     document.forms;                   // 获取文档中<form>元素集合;

     document.images;                  // 获取文档中<img>元素集合;

3.Element类型

 // Element类型用于表现HTML中的元素节点.在上一章中,介绍了对元素节点进行查找/创建等操作;

 // 元素节点的nodeType为1;nodeName为元素的标签名;

 // 元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型;

 元素名                     类型

 HTML             HTMLHtmlElement;

 DIV              HTMLDivElement;

 BODY             HTMLBodyElement;

 P                HTMLParamElement;

4.Text类型

 // Text类型用于表现文本节点类型,文本不包含HTML,或包含转以后的HTML;文本节点的nodeType为3;

 // 在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点;

     var box = document.createElement('div');

     var text1 = Document.createTextNode('Mr');

     var text2 = Document.createTextNode('Lee!');

     box.appendChild(text1);

     box.appendChild(text2);

     document.body.appendChild(box);

     alert(box.childNodes.length);        // =>2;两个文本节点;

 // 把两个同邻的文本节点合并在一起,使用normalize()即可;

     box.normalize();                    // 合并成一个节点;

 // 将一个节点实现分离;

     box.firstChild.splitText(3);        // 分离一个节点;

 // Text还提供一些别的DOM操作的方法

     var box = document.getElementById('box');

     box.firstChild.deleteData(0,2);              // 删除从0位置开始的2个字符;

     box.firstChild.insertData(0,'Hello');        // 从0位置开始添加指定字符;

     box.firstChild.replaceData(0,2,'Miss');      // 从0位置替换掉2个指定字符;

     box.firstChild.substringData(0,2);           // 从0位置获取2个字符,直接输出;

     alert(box.firstChild.nodeValue);             // 输出操作后的结果;

5.Comment类型

 // Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodeValue是注释的内容;

     var box = document.getElementById('box');

     alert(box.firstChild);                        // Comment;

6.Attr类型

 // Attr类型表示文档元素中的属性;nodeType为11;nodeName为属性名,nodeValue为属性值;详细内容在上一章;

二 DOM扩展

1.呈现模式

 // 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明;

 // IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式;

 // 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat;

     if(document.compatMode == 'CSS1Compat'){

         alert(document.documentElement.clientWidth);

     }else{

         alert(document.body.clientWidth);

     }

2.滚动

 // DOM提供了一些滚动页面的方法

     document.getElementById('box').scrollIntoView();        // 设置指定可见;

3.children属性

 // 由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的;

     var box = docuemnt.getElementById('box');

     alert(box.children.length);                             // 得到有效子节点数目;

4.contains()方法

 // 判断一个节点是不是另一个节点的后代,可以使用contains()方法;

     var box = document.getElementById('box');

     alert(box.contains(box.firstChild));                    // =>true;

三 DOM操作内容

1.innerText属性

     document.getElementById('box').innerText;               // 获取文本内容(如有html直接过滤掉);

     document.getElementById('box').innerText = 'Mr.Lee';    // 设置文本(如有html转义);

     // PS:除了Firefox之外,其他浏览器均支持这个方法;Firefox的DOM3级提供了另外一个类似的属性:textContent;

     // 兼容方法

     function getInnerText(element){

         return (typeof element.textContent == 'string')?element.textContent:element.innerText;

     }

     function setInnerText(element,text){

         if(typeof element.textContent == 'string'){

             element.textContent = text;

         }else{

             element.innerText = text;

         }

     }

2.innerHTML属性

 // innerHTML属性可以解析HTML;

     document.getElementById('box').innerHTML;                   // 获取文本(不过滤HTML);

     document.getElementById('box').innerHTML = '<b>123</b>';    // 加粗的123;

 // 虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了;

     box.innerHTML = "<script>alert('Lee');</script>";           // <script>元素不能被执行;

     box.innerHTML = "<style>background:red;</style>";           // <style>元素不能被执行;

3.outerText

 // outerText在取值的时候和innerText一样,同时Firefox不支持;

 // 而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去;

     var box = document.getElementById('box');

     box.outerText = '<b>123</b>';

     alert(document.getElementById('box'));                       // =>null; 不建议使用;

4.outerHTML

 // outerHTML属性在取值和innerHTML一致,但和outerText一样,赋值之后将元素抹去;

     var box = document.getElementById('box');

     box.outerHTML = '123';

     alert(document.getElementById('box'));                      // null;

 // PS:关于最常用的innerHTML属性和节点操作方法的比较;在插入大量HTML标记时,使用innerHTML的效率明显要高很多;

 // 因为在设置innerHTML时,会创建一个HTML解析器,这个解析器是浏览器级别的;因此执行JavaScript会快得多;

 // 但是,创建和销毁HTML解析器也会带来性能损失,最好控制在最合理的范围内;

     for(var i=0; i<10; i++){

         ul.innerHTML = '<i>item</i>';            // 避免频繁;

     }

     // 完善

     for(var i=0; i<10; i++){

         a = '<li>item</i>';                        // 临时保存;

     }

     ul.innerHTML = a;

四 小结

 // DOM是语言中立的API,用于访问和操作HTML和XML文档;

 // DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构;

 // DOM由各种节点构成,简要总结如下:

 // 1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;

 // 2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例;

 //   使用document对象,有很多种方式可以查询和获取节点;

 // 3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;

 // 4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;

JavaScript--DOM进阶(20)的更多相关文章

  1. 第一百一十四节，JavaScript文档对象，DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  2. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  3. Javascript + Dom知识点总结

    Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...

  4. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  5. 前端基础：JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  6. javascript常见的20个问题与解决方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  8. javascript入门进阶（一）

    javascript 入门进阶 这里主要讲解一下在入门阶段很难注意的一些知识点,不一定有用.但是会了总比不会强. 1.HTML为<script>标签准备的6个属性: -async:可选.表 ...

  9. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  10. [.net 面向对象程序设计进阶] (20) 反射(Reflection)（上）利用反射技术实现动态编程

    [.net 面向对象程序设计进阶] (20) 反射(Reflection)(上)利用反射技术实现动态编程 本节导读:本节主要介绍什么是.NET反射特性,.NET反射能为我们做些什么,最后介绍几种常用的 ...

随机推荐

  1. java之Collection框架

    Collection的一些框架类的关系图: 1 Collection简介 Collection的定义 public interface Collection<E> extends Iter ...

  2. python项目实现配置统一管理的方法

    一个比较大的项目总是会涉及到很多的参数,最好的方法就是在一个地方统一管理这些参数.最近看了不少的python项目,总结了两种很有意思的配置管理方法. 第一种 基于easydict实现的配置管理 首先需 ...

  3. web安全之XSS注入

    之前在做项目的时候有遇到一些安全问题,XSS注入就是其中之一 那么,什么是XSS注入呢? XSS又叫CSS (Cross Site Script) ,跨站脚本攻击.它指的是恶意攻击者往Web页面里插入 ...

  4. 关于AOP的PIAB

    AOP:面向切面编程,也就是在运行过程中,按照需要动态加载功能块 PIAB:含义可以从下面提取 Microsoft Patterns & Practices团队在2007年发布的Enterpr ...

  5. vector源码1(参考STL源码--侯捷):源码

    vector源码1(参考STL源码--侯捷) vector源码2(参考STL源码--侯捷) vector源码(参考STL源码--侯捷)-----空间分配导致迭代器失效 vector源码3(参考STL源 ...

  6. windows cmd窗口提示“telnet”命令不能内部或外部命令，也不是可运行的程序

    windows cmd窗口提示“telnet”命令不能内部或外部命令,也不是可运行的程序 原因:C:\Windows\System32目录下没有telnet.exe,path系统变量的值包含了C:\W ...

  7. OAuth 2.0 安全案例回顾

    原文:http://drops.wooyun.org/papers/598 0x00 背景 纵观账号互通发展史,可以发现OAuth比起其它协议(如OpenID)更流行的原因是,业务双方不仅要求账号本身 ...

  8. translate和position的比较

    有很多css属性可以影响元素定位,比如float,margin,padding,position,translate().表面上来看,position:relatative和transform:tra ...

  9. Referrer Policy 介绍

    发布于 署名 4.0 国际 (CC BY 4.0) 原文链接:https://caixw.io/posts/2017/referrer-policy.html 当用户在浏览器上点击一个链接时,会产生一 ...

  10. 15 图-图的遍历-基于邻接矩阵实现的BFS与DFS算法

    算法分析和具体步骤解说直接写在代码注释上了 TvT 没时间了等下还要去洗衣服 就先不赘述了 有不明白的欢迎留言交流!(估计是没人看的了) 直接上代码: #include<stdio.h> ...