DOM（文档对象模型）针对HTML和XML文档的一个API，描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
10.1 节点层次
DOM可以将任何HTML、XML文档描绘成一个多层节点构成的结构。
每个节点拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。
节点之间的关系构成了层次，而所有页面的标记则表现为一个以特点节点为根节点的树形结构。
文档节点是文档的根节点。
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
上述例子，文档节点只有一个子节点，即元素，称为文档元素。
- 文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。
- 每个文档只能有一个文档元素。
- HTML页面中，文档元素始终都是元素。
- XML中，没有预定义的元素，因此任何元素都能成为文档元素。
每段标记都可以通过树中的一个节点表示：
- HTML元素通过元素节点表示
- 特性通过特性节点表示
- 文档类型通过类型节点表示
- 注释通过注释节点表示
10.1.1 Node类型
除IE之外，所有浏览器都可以访问到Node类型。
JavaScript所有节点类型都继承自Node类型，因此所有节点类型都共享相同的基本属性和方法。
每个节点都有NodeType属性，用于表名节点的类型,以下12个数值常量表示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YG2QQhvY-1615212206891)(evernotecid://41E469EA-0EFB-49ED-9229-E2CD30653BA7/appyinxiangcom/7805470/ENResource/p113)]@w=240
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNmhBzjz-1615212206894)(evernotecid://41E469EA-0EFB-49ED-9229-E2CD30653BA7/appyinxiangcom/7805470/ENResource/p114)]@w=240
1、nodeName和NodeValue属性
if(someNode.nodeType == 1){
value = sonmeNode.nodeName; // nodeName的值是元素的标签名称
}
2、节点关系
childNode保存着NodeList【基于DOM结构的动态执行查询结果】
访问NodeList中的节点，NodeList.item(index)
parentNode
3、节点操作
someNode.appendChild(newNode) // 后插
someNode.insertBefore(newNode) // 前插
someNode.replaceChild(newNode) // 替换
someNode.removeChild(someNode.firstChild) // 直接移除也可填someNode.lastChild
4、其他方法
cloneNode(true)
normalize() // 处理文本节点，是否包含文本，或者连续出现两个文本，空文本则删除，梁旭两个文本则合并
10.1.2 Document类型
getElementById/getElementByTagName
document.write/document.writeln
10.1.3 Element类型
getAttribute/setAttribute/removeAttribute
document.createElement()
10.1.4 Text类型
document.createTextNode()
规范化文本节点normalize()
document.createElement('div');
element.className = 'message';
var textNode = document.createTextNode('Hello world!');
element.appendChild(textNode);
var anotherTextNode = document.createTextNode('Yippee!');
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length); // 2
element.normalize();
alert(element.childNodes.length); // 1
alert(element.childNodes.nodeValue); // "Hello world! Yippee!"
分割文本：splitText()
10.1.5 Comment类型
注释节点
document.createComment("A comment ");
10.1.6 CDATASection类型
<div id="myDiv"><![CDATA[This is some content.]]></div>
js方法：
document.createCDataSection()
10.1.7 DocumentType类型
DocumentType对象的3个属性:name、entities和notations。
- name表示文档类型的名称
- entities是由文档类型描述的实体的NamedNodeMap对象;
- notations是由文档类型描述的符号的NamedNodeMap对象。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DocumentType 的 name 属性中保存的就是"HTML":
alert(document.doctype.name); //"HTML"
10.1.8 DocumentFragment类型
DOM 规定文档片段 (document fragment)是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源
var fragment = document.createDocumentFragment();
扫一扫
3695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
