010——DOM

谁借莪１个温暖的怀抱￠ 2022-11-06 08:59 116阅读 0赞

> 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类型 #####

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();

#### 10.2 DOM操作技术 ####