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 相关文章推荐
统计出现最多的字符次数的js代码
Dec 03 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue-cli3跨域配置的简单方法
Sep 06 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
react如何快速设置文件路径别名
Apr 28 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
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
js 数组操作代码集锦
2009/04/28 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
如何利用python进行时间序列分析
2020/08/04 Python
Python通过format函数格式化显示值
2020/10/17 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python