第十七章 DOM基础

2019-02-22  本文已影响0人  尺间天涯

要点：

  1. DOM介绍
  2. 查找元素
  3. DOM节点
  4. 节点操作

什么是 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 id="box">测试div</div>

节点分为三类：

  1. 元素节点： 标签 <div></div>
  2. 文本节点： 标签内文本 测试div
  3. 属性节点： 标签内属性 id="box"

二、查找元素

元素节点方法

方法 说明
getElementById() 获取特定ID元素节点
getElementByTagName() 获取相同元素的节点列表
getElementByName() 获取相同名称的节点列表
getAttribute() 获取特定元素节点属性的值
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移出特定元素节点属性 
window.onload = function () {
    let box = document.getElementById('box');
    console.log(box);
};
// <div id="box">测试div</div>
元素节点属性 说明
tagName 获取元素节点名称
innerHTML 获取元素节点内容，非3WCDOM规范 
console.log(box.tagName);       // DIV 获取元素节点标签名
console.log(box.innerHTML);     // 测试div 获取元素节点内文本(包含标签) 也可以赋值

HTML属性

属性 说明
Id 元素节点的id名称
title 元素节点的title属性值
style CSS内联样式属性
className CSS元素的类 
<div id="box" title="标题" class="类名" style="color: red;">测试div</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()

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

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

window.onload = function () {
    const arr = document.getElementsByTagName('li');
    console.log(arr);
    // HTMLCollection(5) [li, li, li, li, li]
    console.log(arr[0]);
    // <li>1</li>
    console.log(arr.item(0));
    // <li>1</li>
    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

 <div name="box"></div>
 <div name="box"></div> 
 <div name="test"></div>

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本身把节点指针放在元素<div></div>上，也就是本身没有value的
    // 如果要输出<div>value</div>要用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 测试<em>倾斜</em>
    console.log(box.childNodes);
    // NodeList(2) [text, em]0: text1: emlength: 2__proto__: NodeList
    // 第一个节点是 测试  为文本节点
    // 第二个节点是<em>倾斜</em> 这个几点称为元素节点
    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获取属性

<div id="box" class="a" bbb='bbb'>11</div>

    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);
// <p>text</p>

5.insertBefore()

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

6.repalceChild()

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

7.cloneNode()

8.removeChild()

上一篇 下一篇

猜你喜欢

热点阅读