JavaScript DOM进阶方法


Posted in Javascript onApril 13, 2015

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 相关文章推荐
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
JavaScript DOM基础
Apr 13 #Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 #Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 #Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 #Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 #Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 #Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 #Javascript
You might like
模拟flock实现文件锁定
2007/02/14 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python中实现三目运算的方法
2015/06/21 Python
python僵尸进程产生的原因
2017/07/21 Python
python字典DICT类型合并详解
2017/08/17 Python
python之super的使用小结
2018/08/13 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
心得体会开头
2014/01/01 职场文书
财务部岗位职责
2015/02/03 职场文书
处罚决定书范文
2015/06/24 职场文书
财务管理制度范本
2015/08/04 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
详解Vue3使用axios的配置教程
2022/04/29 Vue.js