JavaScript DOM进阶方法

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区域和文档片段;

赞 (0)

相关推荐

  • JavaScript进阶教程(第二课)第1/3页

    今天我们将学习一项很有用而且很有趣的内容:cookies - 这是用来记录访问过你的网页的人的信息.利用Cookies你能记录访问者的姓名,并且在该访问者再次访问你的站点时向他发出热情的欢迎信息.你还可以利用cookie记忆用户端的特点 - 如果访问者的所接入的网线的速度慢,cookie可以自动告诉你在给其发送网页的时候只发送尽可能少的图片内容. 只要你在合理的范围内使用cookies(不要用它探询用户的个人隐私),cookies还是相当实用得.所以我要向你们介绍cookies的工作原理,但是在

  • JavaScript进阶教程(第一课)第1/3页

    欢迎您继续学习Javascript进阶教程.在此之前我们已经学习了Javascript初级教程.在这一阶段的学习中我们将继续学习在上次的教程中还没有来得及谈及的问题.我还将向你们展示Javascript的许多神奇功能,使你能够制作真正对多媒体应用程序.     以下是我们将涉及的内容:     给变量赋值     If-then语句     For和while循环     编写你自己的函数     打开及控制窗口     读写HTML 表单     应用数组     控制图片转换     如果这

  • JavaScript中split与join函数的进阶使用技巧

    Javascript拥有两个相当强大而且受开发者喜爱的函数:split 与join 俩对立的函数.这俩函数能让string与array两种类型互换,也就是数组能被序列化为字符串,反之亦然.我们能把这俩函数发挥得淋漓尽致.下面就来探索里面的一些有趣的应用, 首先介绍一下这两个函数: String.prototype.split(separator, limit) separator把字符串分割为数组,可选参数limit定义了生成数组的最大length. "85@@86@@53".spli

  • JavaScript进阶教程(第三课)第1/2页

    事件的定时以及浏览器的识别 随着我们所掌握的JavaScript日渐丰富,我们可以编制出越来越复杂的应用程序.上次的课程中我们学习了如何利用JavaScripts编写Cookies.今天我们将学习如何加入定时功能.给时间定时的能力在浏览器中非常有用,而在动态HTML应用中发挥更大的功用. 你可能会注意到动态HTML可以在页面中移动不同的内容.在JavaScript中将某个物体在屏幕中移动需要用到一个循环(loop),用循环的功能使物体随着时间推移移动.但是你如何告诉JavaScript将某个物体

  • JavaScript进阶教程(第四课第一部分)

    在以前的课程中,我们学习了对文本和字符串的各种操作,今天我们专注于两种不同的数据类型:图象和对象.学完这一课,你将知道如何: 使用JavaScript来加速图象交换. 创建你自己的对象来使脚本易于理解. 使用关联数组来快速存取脚本中的每一个对象. 使用JavaScript做图象变换的一个主要问题是,它直到需要换图时才去告诉浏览器下载那张图象.如果你有一张大的图象,想在鼠标滑过一副图象时调出来,浏览器得临时下载这张图,这可能会花一定时间从而使滑动效果大打折扣. 如果你的连接速度较慢,而你要调入的是

  • JavaScript进阶教程(第三课第二部分)第1/2页

    要使定时器循环工作你需要写一个函数实现循环调用.这里是一个例子: var the_count = 0;    var the_timeout;    function doTimer()    {        window.document.timer_form.the_text.value = the_count;        the_count += 2;        the_timeout = setTimeout("doTimer();", 2000);    } 这里用

  • JavaScript进阶练习及简单实例分析

    JavaScript进阶练习及简单实例分析

    当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • JavaScript进阶教程(第二课续)第1/2页

    现在你已经掌握了先进的字符串处理和相关数组概念,该是我们打开神奇的cookie魔瓶的时候了．cookie是记录访问你的站点的人的信息,它其实驻留在用户的硬盘上,即使用户已经离开你的站点,cookie在用户的硬盘上仍然存在,如果该用户再次返回你的站点,则该cookie就会被一起发回到你的服务器中,便于你统计和处理重复到访者的信息． 下面我们看一看一个cookie应用的典型例子,我们在一个网页中设置cookie,然后通过别的网页读取它．在使用该例子的时候,想想如果没有cookie,你如何做到这一点．

  • JavaScript DOM进阶方法

    DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点; 一 DOM类型 类型名                        说明 Node                 表示所有类型值的统一接口,IE不支持; Document             表示文档类型; Element              表示元素节点类型; Text                 表示文本节点类型; Comment           

  • JavaScript基础进阶之数组方法总结(推荐)

    数组常用方法总结: 下面我只总结了es3中常用的数组方法,一共有11个.es5中新增的9个数组方法,后续再单独总结. 1个连接数组的方法:concat() 2个数组转换为字符串的方法:join().toString() 6个增删数组元素的方法:pop().push().shift().unshift().slice().splice() 2个数组排序方法:reverse().sort() 连接数组的方法: 1.concat() 作用:连接两个数组,合并为一个新数组. 用法:arr1.concat

  • JavaScript中ahooks 处理 DOM 的方法

    目录 前言 DOM 类 Hooks 使用规范 getTargetElement useEffectWithTarget 思考与总结 前言 目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 本篇文章探讨一下 ahooks 对 DOM 类 Hooks 使用规范,以及源码中是如何去做处理的. DOM 类 Hooks 使用规范 这一章节,大部分参考官

  • javascript基础进阶_深入剖析执行环境及作用域链

    javascript基础进阶_深入剖析执行环境及作用域链

    执行环境 执行环境定义了变量或函数有权访问的其他函数,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象. 变量对象 环境中定义的所有变量和函数都保存在这个对象中. 全局执行环境 全局执行环境是最外围的一个执行环境.在web浏览器中,全局执行环境被认为是Window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的. 每个函数都有自己的执行环境. 作用域链 当代码在一个环境中执行,会创建变量对象的一个作用域链. 用途:保证对执行环境有权访问的所有变量和函数有序访问.

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史

    JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出IE3的时候发布了自己的VBScript语言,同时以JScript为名发布了JavaScript 的一个版本,很快赶上了 Netscape 的步伐.面对微软公司的竞争,Netscape 和 Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript 语言进行了标准化,于是出现了ECMAScript语言,这是同一种语言

  • JavaScript DOM节点操作方法总结

    JavaScript DOM节点操作方法总结

    节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的

  • JS访问DOM节点方法详解

    本文实例讲述了JS访问DOM节点方法.分享给大家供大家参考,具体如下: 查找并访问节点 你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode.firstChild 以及 lastChild 属性 getElementById() 和 getElementsByTagName() getElementById() 和 getElementsByTagName()

  • JavaScript DOM 对象深入了解

    JavaScript DOM 对象深入了解

    什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起

  • javascript DOM的详解及实例代码

    javascript DOM 总结 一直以为DOM(文档对象模型)是JS中最简单的一部分.不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js(这里指的是客户端的js)入门的起手点. 最近我在做一些有用到DOM的练习时,发现自己的DOM知识非常零散(一直以为掌握的很好),可能有很多朋友都觉得,DOM嘛,也就调用调用几个方法,或者我直接使用jQuery,根本不用考虑DOM的细节.是,这也没错,jQuery对DOM的封装可谓前无古人,但是正

  • DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

    DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免

随机推荐