JavaScript学习8:DOM进阶

DOM自身存在很多类型,我们在上篇博客中提到了大部分的类型,比如Element类型:表示的是元素节点,比如Text类型:表示的是文本节点。DOM也提供了一些扩展功能。

一.DOM类型

上篇博客我们了解了DOM的节点以及怎样操作和查询节点,而本身这些不同的节点,又有着不同的类型

我们随便来看两个类型:Document类型和Element类型

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

Element类型用于表现HTML中的元素节点。在之前的文章里,我们  已经可以对元素节点进行查找、创建等操作,元素节点的nodeType为1,nodeName为元素的标签名。

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

二.DOM扩展

1 呈现模式

从IE6开始区分标准模式和混杂模式(怪异模式),主要是看文档的声明。IE为Document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式。如果是标准模式,则返回CSS1Compat,如果是混杂模式则返回BackCompat。

2 滚动

DOM提供了一些滚动页面的方法,如下:

Document.getElementById(‘box’).scrollIntoView();

3 children属性

由于子节点空白问题,IE和其他浏览器解释不一样。虽然可以过滤掉,但是如果得到有效子节点,可以使用children属性,支持的浏览器为:IE5+,Firefox3.5+等等。

4 contains()方法

判断一个节点是不是另一个节点的后代,我们可以使用contains()方法。这个方法是IE率先使用的,开发人员无须遍历即可获取此信息。

三.DOM操作内容

1 innerText属性

除了Firefox之外,其他浏览器均支持这个方法。但是Firefox的DOM3级提供了另一个类似的属性:textContent,做上兼容即可通用。

2innerHTML属性

这个属性我们之前介绍过,不拒绝HTML。虽然可以插入HTML,但是还是有一些限制的,也就是所谓的作用域元素,离开这个作用域就无效了。

3outerText

outerText在取值的时候和innerText一样,火狐同样不支持,而赋值方法相当危险,他不单替换了文本内容,还将元素直接抹去。

4outerHTML

这个使用和innerHTML一样,同样在赋值的时候要谨慎。

时间: 2024-08-05 01:57:08

JavaScript学习8:DOM进阶的相关文章

JavaScript学习笔记——DOM基础 2.1

一.DOM 1.DOM的基本概念 DOM是Document Object Model的缩写,意思是文本对象模型,也就是说,如果没有Document,DOM也就无从谈起.我们可以把创建的网页当作是一个Document对象. JavaScript的对象可以分为三种类型:由用户自定义的对象,由JavaScript本身提供的内建对象,以及由浏览器提供的宿主对象. 顺便提一下BOM(Browser Object Model)和WOM(Window Object Model),其实这两个说的是一种东西,但大

Javascript学习总结-DOM编程-(七)

1. DOM 1.1. DOM简介 全称Document Object Model,即文档对象模型. DOM描绘了一个层次化的树,允许开发人员添加.删除.修改页面的某一部分. 浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的, 而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树, 组建好之后,按照树的结构将页面显示在浏览器的窗口中. 1.2. 节点层次 HTML网页是可以看做是一个树状的结构,如下: html |-- head |     |-- title |

JavaScript学习笔记——DOM基础 2.6

一.CSS-DOM 1.清楚一个概念 HTML负责的是结构,CSS负责的是样式,JavaScript负责的是动作(行为). 2.style属性 语法:element.style 返回:object style相对于element是一个属性,而style本身是一个对象,它包含了诸多元素的样式. 关于这一点,可以根据后面的例子去理解. 3.获取样式 例子:element.style.fontFamily 返回:style对应属性的值,如fontFamily,返回“Microsoft yahei” 注

JavaScript学习笔记——DOM基础 2.5

一.document.write方法 document对象write()方法,常用来向网页中输出字符串,圆括号中可以是要输出的字符串, document.write('这是我的个人博客'); 也可以是字符串变量, var myText = '这是我的个人博客'; document.write(myText); 还有一种,就是通过字符串和变量组合的方式进行输出. var myText = '这是我的'; document.write(myText + '个人博客'); document.write

JavaScript学习--Item29 DOM基础详解

看完JavaScript高级程序设计,整理了一下里面的DOM这一块的知识点,比较多,比较碎!DOM在整个页面的地位如图: DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口).DOM描,绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 1.节点层次 DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点

javascript学习笔记DOM(2)

DOM DOM元素的类型 节点类型          节点名称        节点值 nodeType      nodeName      nodeValue    元素节点        文本节点          注释节点      documentnodeType              1    3  8  9 nodeName       大写的标签名      #text         #comment    #document nodeValue    null      

JavaScript学习笔记——DOM对象

javascript-document对象详解 DOM document(html xml) object modledocument对象(DOM核心对象) 作用: 1.内容 innerHTML 2.属性 3.样式 document对象 一.属性 title 返回或设置当前文档的标题 URL 返回当前文档的url bgColor 设置文档的背景色 fgColor 设置文档的前景色(设置文字颜色) 二.方法 getElementById(idname) 返回拥有指定id的(第一个)对象的引用 ge

javascript学习笔记DOM(1)

DOM DOM我个人理解就是网页中的每一个元素,如果把每一个节点和子节点以树形结构表示出来很像家里的族谱图,如下图. 所以DOM关系也可以看成是描述网页元素关系的“族谱图”,只要知道其中一个人就可以找到任何一个跟他有直接或者间接关系的人,(例如:你想找你的二大爷,可以找到你爸爸的二哥就可以了,要是指向的是隔壁老王的二哥就出事儿了.).DOM关系也是一样,知道其中一个就可以根据他们的关系来找到任何一个DOM元素. 获取元素的方法有哪些? 1.document.getElementById("Id&

JavaScript学习--Item30 数组进阶全掌握

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 1.创建数组 在JavaScript多种方式创建数组 1.构造函数 1.无参构造函数,创建一空数组 var a1=new Array()

第一百一十四节,JavaScript文档对象,DOM进阶

JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容