DOM(文档对象模型)
针对HTML和XML的一个API,DOM描述了一个层次化的节点树。
DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现
1.Node类型
(1)nodeType属性
if(someNode.nodeType == 1){
alert("Node is an element");
}
(2)nodeName和nodeValue属性
节点的具体信息,使用前最好先检测节点类型,
若节点为元素,则nodeName中始终保存着元素的标签名,而nodeValue的值则始终为null
(3)childNodes属性
其中保存着一个NodeList对象。NodeList是一种类对组对象,用于保存一组有序的节点,可以通过方括号语法来访问
这个对象也有length属性,但它不是Array的实例,
它是基于DOM结构动态执行查询的结果,因此DOM结构的变化可以自动反映在NodeList对象中
将NodeList对象转化为数组:
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0); // 在IE8及之前版本无效
(4)parentNode属性,指向文档树种的父节点
包含在childNodes列表中的每个节点相互之间都是同胞节点,可以使用previousSibling和nextSibling属性访问
(5)firstChild和lastChild 指向childNodes列表中第一个和最后一个节点
(6)hasChildNodes() 测试节点是否含有一个或多个子节点,返回true/false
(7)所有节点都有一个ownerDocument属性,指向表示整个文档的文档节点,任何节点不能同时存在两个或多个文档中
2.操作节点的方法
(1)appendChild() 用于向childNodes列表的末尾添加一个节点,返回新增的节点
如果传入到appendChild()中的节点已经是文档的一部分了,则将该节点由原位置移动到新的位置
(2)insertBefore()接收两个参数,要插入的节点和参照的节点,插入到参照节点之前
(3)replaceChild(),两个参数,要插入的节点和替换的节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstNode);
3.Document类型
JavaScript通过Document类型表示文档,在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面,
而且,document对象是是window对象的一个属性,因此可以将其作为全局对象来访问
DOM标准规定Document节点的子节点可以是DocumentType,Element,ProcessInstruction或Comment
但还有两个访问其子节点的快捷方式,
(1)documentElement属性,始终指向HTML页面中的<html>元素
(2)通过childNodes列表访问文档元素
var html = document.documentElement; // 取得对<html>的引用
var body = document.body // 取得对<body>的引用
文档类型是只读的,不能调用appendChild()等方法
而且应注意不同浏览器对于注释的理解
(3)文档信息
取得文档标题: document.title
取得完整URL: document.URL
取得域名: document.domain
(4)查找元素
document.getElementById("myDiv"); // 通过ID
document.getElementByTagName("img") // 通过标签名
document.getElementsByName("color") // 返回带有给定name特性的所有元素
(5)document.write()文档写入
在加载结束后调用的话, document.write() 会重写整个页面
4.Element类型
(1)HTML元素,所有HTML元素都由HTMLElement类型表示
var div = document.getElementById("myDiv");
div.id
div.className
div.title 等属性
(2)取得特性
getAttribute(),不存在返回null
(3)setAttribute() 要设置的特性名和值,如果已经存在,则替换
div.setAttribute("id","someOtherId");
(4)removeAttribute()彻底删除元素的特性,清空值和特性
(5)创建元素
document.createElement("div");
5.DocumentFragment 类型
轻量级的文档,可以包含和控制节点
创建文档片段,批量添加文本,优化性能,减少重排
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for(var i=0;i<3;i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Item " + (i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);
- js文档对象模型(DOM)
- JavaScript笔记03——文档对象模型(Document Object Model,简称DOM):获取HTML元素、操作HTML元素
- 文档对象模型DOM通俗讲解
- dom文档对象模型图
- DOM 文档对象事件模型及示例
- DOM文档对象模型(1)
- 第10章 文档对象模型DOM 10.3 Element类型
- 学习笔记:HTML DOM(文档对象模型)
- 文档对象模型 (DOM)
- Java中文档对象模型DOM经验小结
- JavaScript学习笔记(09)之文档对象模型DOM
- (七)文档对象模型(DOM)(下)
- 文档对象模型DOM1
- javascript文档对象模型DOM入门详解
- DOM文档对象模型
- DOM(文档对象模型)基础加强
- 什么是DOM(Document Object Model)文档对象模型
- DOM(文档对象模型document object model):总结自红宝书
- 文档对象模型(DOM)
- 文档对象模型(DOM)