DOM基础一
来源:互联网 发布:教师培训课程 大数据 编辑:程序博客网 时间:2024/06/07 13:34
JavaScript的组成
在了解DOM之前,我们先来了解一下JavaScritpt的组成,JavaScript由三个部分组成
ECMAScript (核心) DOM BOM
ECMAScript是一套标准,规定了最基本的语法、关键字、数据类型等,在ECMAScript的基础上,进行的扩展,使得ECMAScript拥有更强大功能。
DOM (Document Object Model)文档对象模型
DOM是对ECMAScript的扩展,DOM给了ECMAScript访问并修改文档的内容、结构和样式的能力。BOM (Browser Object Model) 浏览器对象模型
BOM也是对ECMAScript的扩展,是由浏览器提供的一个接口, BOM给了ECMAScript操控浏览器窗口的能力。
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型
下面内容说的DOM就是HTML DOM,是针对于HTML文档的一个接口
DOM的节点类型
DOM节点类型有12种,常见的有3种 元素节点 nodeType 1 属性节点 nodeType 2 文本节点 nodeType 3通过以下属性可以获取节点类型,名称和节点值元素.nodeType:只读 属性 当前元素的节点类型元素.nodeName:只读 属性 当前元素的节点名称元素.nodeValue:可读可写 属性 当前元素的节点值
子节点
1)元素.childNodes:只读 属性 子节点列表集合childNde 属性在标准浏览器下包含了元素节点和其他类型节点(标准浏览器是指FF、Chrome、IE9+的浏览器),在非标准IE(IE8-)的浏览器中只包含元素节点2)元素.children:只读 属性 子节点列表集合(只包含元素类型节点)children属性是一个非标准属性,但是各个浏览器都支持它,children属性获取的是元素节点列表集合,值得注意的一点是children属性在非标准IE下会包含注释节点,而其他浏览器则不包含
兄弟节点
ElementTraversal规范定义了ElementTraversal接口,它允许脚本遍历DOM树中的元素节点,而不包含元素节点之外的其他节点,如注释节点、文字节点等。这个规范给我们提供了快速、方便的方法来访问元素节点。在以前的方法中,我们使用firstChild、nextSibling、childNodes、children等方法来进行遍历,但要得到元素节点,我们还需要来判断节点的类型。 返回值元素.firstElementChild null元素.lastElementChild null元素.previousElementSibling null元素.nextElementSibling null元素.childElementCount 0 返回值元素.firstChild null元素.lastChild null元素.previousSibling null元素.nextSibling null
在非标准的IE下不支持ElementTraversal接口,所以我们需要做一下兼容性处理
<ul id="list"> <li> 1 </li> <li> 2 </li> <li> 3 </li></ul>
var oUl=document.getElementById('list');var oFirst=oUl.firstElementChild || oUl.firstChild;oFirst.style.backgroundColor='red';
阅读全文
0 0
- DOM基础----DOM(一)
- DOM基础(一)
- DOM 基础(一)
- DOM基础一
- javascript基础一 (DOM基础一)
- XML DOM基础概念一
- DOM 与 DOM 解析详解(一)基础
- DOM基础及应用(一)
- DOM 基础
- DOM基础
- DOM基础
- DOM基础
- Dom基础
- Dom基础
- DOM基础
- DOM基础
- DOM基础
- DOM基础
- mysql 5.7.18 winx64安装配置方法图文教程
- Java 后缀++ 小记
- Linux学习- declare / typeset 声明变量类型与属性
- 互联网创业,没有程序员怎么办?
- 取数游戏
- DOM基础一
- Java结合postgreSql的增删改查遇到问题2
- 《android手势密码》
- 如何证明我妈是我妈?如今终于有了答案!
- HDU 6038 Function (数学)
- Spring AOP : AspectJ Pointcut 切点
- 剑指offer解题报告(Java版)——二叉搜索树转换为双向链表 27
- WPF C# 多屏情况下,实现窗体显示到指定的屏幕内
- linux命令的理解