第十七章 DOM基础

要点：

DOM介绍
查找元素
DOM节点
节点操作

什么是 DOM？

DOM即文档对象，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创建的DHTML（动态HTML），但是现在已经成为一种表现和操作页面标记的真正跨平台、语言中立的方式。

DOM中的三个字母，分别是Document（文档），可以理解为整个web加载的网页文档。Object（对象）可以理解为类似window对象之类的东西，可以调用属性和方法。Model（模型），可以理解为网页文档的树形接口。

DOM有三个等级，分别是DOM1，DOM2，DOM3，并且DOM1在1998年10月成为W3C标准。（IE中的DOM对象都是COM对象实现的，所以IE的DOM与其他浏览器有一定差异）

一、节点

加载HTML页面时候，Web浏览器生成一个树形结构，用来表示页面内部结构。DOM将这种树形结构理解为由节点组成。

HTML DOM Node Tree

测试div

节点分为三类：

元素节点：标签
文本节点：标签内文本测试div
属性节点：标签内属性 id="box"

二、查找元素

元素节点方法

方法	说明
getElementById()	获取特定ID元素节点
getElementByTagName()	获取相同元素的节点列表
getElementByName()	获取相同名称的节点列表
getAttribute()	获取特定元素节点属性的值
setAttribute()	设置特定元素节点属性的值
removeAttribute()	移出特定元素节点属性

window.onload = function () {
    let box = document.getElementById('box');
    console.log(box);
};
// 测试div

元素节点属性	说明
tagName	获取元素节点名称
innerHTML	获取元素节点内容，非3WCDOM规范

console.log(box.tagName);       // DIV 获取元素节点标签名
console.log(box.innerHTML);     // 测试div 获取元素节点内文本(包含标签) 也可以赋值

HTML属性

属性	说明
Id	元素节点的id名称
title	元素节点的title属性值
style	CSS内联样式属性
className	CSS元素的类

测试div

window.onload = function () {
    let box = document.getElementById('box');
    console.log(box.id);            // box
    console.log(box.title);         // 标题
    console.log(box.style);
    // demo.js:5 CSSStyleDeclaration {0: "color", alignContent: ...}
    console.log(box.style.color);   // red
    console.log(box.className);     // 类名
};

getElementByTagName()

参数传递一个标签名，返回数组

window.onload = function () {
    const arr = document.getElementsByTagName('li');
    console.log(arr);
    // HTMLCollection(5) [li, li, li, li, li]
    console.log(arr[0]);
    // 1
    console.log(arr.item(0));
    // 1
    console.log(arr[0].innerHTML = 'nihao');
    // 更改第一项
};

返回body节点

// 获取body
    const body = document.getElementsByTagName('body')[0];
    // console.log(body); // 0: body length: 1
    console.log(body); // 0: body length: 1

星号的含义

    const all = document.getElementsByTagName('*');
    console.log(all); // 0: body length: 1
    // HTMLCollection(14) [html, head, meta, title, meta, meta, script, body, ul, li, li, li, li, li, viewport: meta]

getElementByName()

获取相同名称的（name）的元素，返回数组, 一般用于表单。IE不支持除表单外的元素上获取name

window.onload = function () {
    const box = document.getElementsByName('box');
    console.log(box); // NodeList(2) [div, div]
};

getAttribute()

默认不可以获得自定义属性，但getAttribute可以返回自定义以及其他属性

const box = document.getElementById('box');
console.log(box.zzz);  // undefined   ie支持
console.log(box.getAttribute('zzz')); // 自定义  ie返回对象

常用方法

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

三、DOM节点

window.onload = function () {
    var box = document.getElementById('box');
    console.log(box.nodeName);
    // 与tagName等价   DIV
    console.log(box.nodeType);
    // 获取元素类型节点值  1  元素节点为1，属性节点2，文本节点3
    console.log(box.nodeValue);
    // 元素节点本身没有内容所以是null null
    // node本身把节点指针放在元素上，也就是本身没有value的
    // 如果要输出value要用InnerHTML
    // node只能获取当前节点的东西
    // 文本节点不等于文本内容
};

node节点属性

节点类型	nodeName	nodeType	nodeValue
元素	元素名	1	null
属性	属性名	2	属性值
文本	#text	3	文本内容（不包含html）

层次节点属性

属性	说明
childNodes	获取当前元素节点的所有子节点
fistChild	获取当前元素节点的第一个子节点
lastChild	获取当前元素的最后一个子节点
ownerDocument	获取该节点的文档节点，相当于document
parentNode	获取当前节点的父节点
previousSibling	获取当前节点的前一个同级节点
nextSibling	获取当前节点的后一个同级节点
attributes	获取当前元素节点的所有属性节点集合

    var box = document.getElementById('box');
    console.log(box.innerHTML);
    // demo.js:3 测试倾斜
    console.log(box.childNodes);
    // NodeList(2) [text, em]0: text1: emlength: 2__proto__: NodeList
    // 第一个节点是 测试  为文本节点
    // 第二个节点是倾斜 这个几点称为元素节点
    console.log(box.childNodes[0].nodeType);
    //  3 文本节点
    console.log(box.childNodes[0].nodeValue); 
    // 测试  获取文本节点的文本内容

node无法遍历出属性节点，只能遍历元素节点和文本节点。

ar box = document.getElementById('box');
    for (let i = 0; i < box.childNodes.length; i++) {
        if (box.childNodes[i].nodeType === 1) {
            console.log('元素节点 ' + box.childNodes[i].nodeType);
        }
        else if (box.childNodes[i].nodeType === 3) {
            console.log('文本节点 ' + box.childNodes[i].nodeValue);
        }
    }

//  1
// 测试

nodeValue和innerHTML的区别

nodeValue必须用在文本节点上，不可以添加html元素，innerHTML只需要用在当前元素上，并且可以添加html元素。

attributes获取属性

    var box = document.getElementById('box');
    console.log(box.attributes);
    // 返回NamedNodeMap对象
    // {0: id, 1: class, 2: bbb, id: id, class: class, bbb: bbb, length: 3}
    console.log(box.attributes[0].nodeType);
    // 2 属性节点
    console.log(box.attributes[0].nodeValue);
    // box
    console.log(box.attributes[0].nodeName);
    // id
    console.log(box.attributes['id']);
    // id = 'box'

四、节点操作

节点操作方法

方法	说明
write()	把任意字符串插入到文档中
createElement()	创建一个元素节点
appendChild()	将新节点追加到子节点列表末尾
createTextNode()	创建一个文本节点
insertBefore()	将新节点插入在前面
repalceChild()	将新节点替换旧节点
cloneNode()	复制节点
removeChild()	移出节点

1. write()

document.write('文字')  // 一般用于测试

2.createElement()

var p = document.createElement('p');
// 只创建了节点，但没有上到节点上，驻留在内存中

3.appendChild()

box.appendChild(p); // 追加子元素p到box

4.createTextNode()

var text = document.createTextNode('测试text');
p.appendChild(text);
// text

5.insertBefore()

box.parentNode.insertBefore(p, box);
// 在box上方添加p元素 必须在父节点操作

6.repalceChild()

box.parentNode.replaceChild(p, box);
// p元素替换了div元素