JS基础知识DOM+BOM

文档节点（document）：9，对应常量Node.DOCUMENT_NODE 元素节点（element）：1，对应常量Node.ELEMENT_NODE 属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE 文本节点（text）：3，对应常量Node.TEXT_NODE 文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE

document.nodeType // 9

document.nodeType === Node.DOCUMENT_NODE // true

document 对象_属性

document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用

document.doctype

document.doctype，指向<DOCTYPE>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE html>。如果网页没有声明 DTD，该属性返回null

var doctype = document.doctype;
doctype // "<!DOCTYPE html>"

document.documentElement

document.documentElement属性返回当前文档的根节点（root），一般是<html>节点

document.documentElement

document.body，document.head

document.body属性指向<body>节点，document.head属性指向<head>节点

document.forms

document.forms属性返回所有<form>表单节点

var selectForms = document.forms;

document.images

document.images属性返回页面所有<img>图片节点

var imglist = document.images;

for(var i = 0; i < imglist.length; i++) {
  if (imglist[i].src === 'banner.png') {
    // ...
  }
}

document.scripts

document.scripts属性返回所有<script>节点

var scripts = document.scripts;
if (scripts.length !== 0 ) {
  console.log('当前网页有脚本');
}

document.domain

document.domain属性返回当前文档的域名

document.domain; // www.itbaizhan.com

document对象_方法/获取元素

document.getElementsByTagName()

document.querySelector()，document.querySelectorAll()

document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

document.querySelectorAll方法返回指定元素节点的子树中匹配selector的节点集合

var el1 = document.querySelector('.myclass');
var els = document.querySelectorAll('.myclass')

document.createElement()

document.createElement方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement('div');

document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容。

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

document.createAttribute方法生成一个新的属性节点（Attr实例），并返回它

var attribute = document.createAttribute(name);

document.createAttribute方法的参数name，是属性的名称。

var node = document.getElementById('div1');

var a = document.createAttribute('my_attrib');
a.value = 'newVal';

node.setAttributeNode(a);
// 或者
node.setAttribute('my_attrib', 'newVal');

Element对象

Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）

Element.id

Element.id属性返回指定元素的id属性，该属性可读写。

// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"

Element.tagName

Element.tagName属性返回指定元素的大写标签名

// HTML代码为
// <span id="myspan">Hello</span>
var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"

Element.className，Element.classList

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。

classList属性返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。

// HTML 代码 <div class="one two three" id="myDiv"></div>
var div = document.getElementById('myDiv');

div.className
// "one two three"

div.classList
// {
//   0: "one"
//   1: "two"
//   2: "three"
//   length: 3
// }

上面代码中，className属性返回一个空格分隔的字符串，而classList属性指向一个类似数组的对象，该对象的length属性（只读）返回当前元素的class数量。

classList对象有下列方法。

add()：增加一个 class。
remove()：移除一个 class。
contains()：检查当前元素是否包含某个 class。

var div = document.getElementById('myDiv');

div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.contains('myCssClass'); // 返回 true 或者 false

Element.innerHTML

Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。

如果将innerHTML属性设为空，等于删除所有它包含的所有节点。

el.innerHTML = '';

Element.innerText

Element.innerText与Element.innerHTML类似，但是如果写入的内容是标签则识别为字符串

Element获取元素位置一

属性	描述
clientHeight	获取元素高度包括padding部分，但是不包括border、margin
clientWidth	获取元素宽度包括padding部分，但是不包括border、margin
clientLeft	元素节点左边框（left border）的宽度
clientTop	元素节点上边框（top border）的高度
scrollHeight	元素总高度，它包括padding，但是不包括border、margin包括溢出的不可见内容
scrollWidth	元素总宽度，它包括padding，但是不包括border、margin包括溢出的不可见内容
scrollLeft	元素的水平滚动条向右滚动的像素数量
scrollTop	元素的垂直滚动条向下滚动的像素数量
offsetHeight	元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border
offsetWidth	元素的 CSS 水平宽度（单位像素），包括元素本身的高度、padding 和 border
offsetLeft	到定位父级左边界的间距
offsetTop	到定位父级上边界的间距

Element.clientHeight，Element.clientWidth

Element.clientHeight属性返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度

除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。

Element.clientWidth属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度。

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度）。document.body的高度则是网页的实际高度。

// 视口高度
document.documentElement.clientHeight

// 网页总高度
document.body.clientHeight

Element.clientLeft，Element.clientTop

Element.clientLeft属性等于元素节点左边框（left border）的宽度（单位像素），不包括左侧的padding和margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0。该属性总是返回整数值，如果是小数，会四舍五入

Element.clientTop属性等于网页元素顶部边框的高度（单位像素）

var box = document.getElementById("box");
console.log(box.clientLeft);
console.log(box.clientTop);

Element.scrollHeight，Element.scrollWidth

Element.scrollHeight属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话）

Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。这两个属性只读

整张网页的总高度可以从document.documentElement或document.body上读取

// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight

Element.getAttribute()

Element.getAttribute方法接受一个字符串作为参数，返回同名属性的值。如果没有该属性，则返回null。

var mydiv = document.getElementById('mydiv');
var id = mydiv.getAttribute('id');

Element.setAttribute方法用于为当前节点设置属性。如果属性已经存在，将更新属性值，否则将添加该属性。该方法没有返回值。

Element.removeAttribute()

Element.removeAttribute方法移除指定属性。该方法没有返回值。

Element获取元素位置二

Element.scrollLeft，Element.scrollTop

Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取

document.documentElement.scrollLeft

document.documentElement.scrollTop

Element.offsetHeight，Element.offsetWidth

Element.offsetHeight属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。

Element.offsetWidth属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。

这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如display: none;），则返回0

Element.offsetLeft，Element.offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移

<div class="parent">
    <div class="box" id="box"></div>
</div>
.parent{
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    left: 50px;
    top: 50px;
}

.box{
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    left: 50px;
    top: 50px;
}
var box = document.getElementById("box");
console.log(box.offsetLeft);
console.log(box.offsetTop);

Attribute属性的操作

Element.getAttribute()

HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）

元素节点提供四个方法，用来操作属性

getAttribute()
setAttribute()
hasAttribute()
removeAttribute()

Element.getAttribute方法接受一个字符串作为参数，返回同名属性的值。如果没有该属性，则返回null。

var mydiv = document.getElementById('mydiv');
var id = mydiv.getAttribute('id');

Element.setAttribute方法用于为当前节点设置属性。如果属性已经存在，将更新属性值，否则将添加该属性。该方法没有返回值。

#Element.removeAttribute()

Element.removeAttribute方法移除指定属性。该方法没有返回值。

Element.getAttribute()

Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null

// HTML代码为

// <div id="div1" align="left">

var div = document.getElementById('div1');

div.getAttribute('align') // "left"

Element.setAttribute()

Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性

var d = document.getElementById('d1');

d.setAttribute('align', 'center');

下面是对img元素的src属性赋值的例子

var myImage = document.querySelector('img');

myImage.setAttribute('src', 'images/girl.png');

Element.hasAttribute()

Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性

var d = document.getElementById('box');

if (！d.hasAttribute('align')) {
  d.setAttribute('align', 'center');
}

Element.removeAttribute()

Element.removeAttribute方法用于从当前元素节点移除属性

// HTML 代码为
// <div id="box" align="left" width="200px">
document.getElementById('box').removeAttribute('align');
// 现在的HTML代码为
// <div id="box" width="200px">

dataset 属性

有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一种解决方法是自定义属性

使用标准提供的data-*属性

<div id="box" data-itbaizhan="itbaizhan">

然后，使用元素节点对象的dataset属性，它指向一个对象，可以用来操作 HTML 元素标签的data-*属性

var n = document.getElementById('box');
n.dataset.itbaizhan // itbaizhan
n.dataset.itbaizhan = 'itbaizhan'

Text 节点

文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。

Text节点属性

data

data属性用来设置或读取文本节点的内容

<p>Hello World</p>
// 读取文本内容
document.querySelector('p').firstChild //"Hello World"
document.querySelector('p').firstChild.data //Hello World

// 设置文本内容
document.querySelector('p').firstChild.data = 'Hello World';

length

length属性返回当前文本节点的文本长度

(new Text('Hello')).length // 5

Text节点方法

appendData()

在Text节点尾部追加字符串

// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.appendData('!');// 页面显示 Hello World!

deleteData()

删除Text节点内部的子字符串，第一个参数为子字符串开始位置，第二个参数为子字符串长度

// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.deleteData(7, 4);
// 页面显示 Hello W

insertData()

在Text节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串

// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.insertData(7, 'Hello ');
// 页面显示 Hello WHello orld

replaceData()

用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串

// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.replaceData(7, 4, 'World');
// 页面显示 Hello WWorld

substringData()

用于获取子字符串，第一个参数为子字符串在Text节点中的开始位置，第二个参数为子字符串长度

// <p>Hello World</p>
var pElementText = document.querySelector('p');
pElementText.firstChild.substringData(7, 4); 
// 页面显示不变，返回"orld "

remove()

remove方法用于移除当前Text节点

// <p>Hello World</p>
document.querySelector('p').firstChild.remove()
// 现在 HTML 代码为
// <p></p>

DocumentFragment 节点

DocumentFragment节点代表一个文档的片段，它一般用于构建一个 DOM 结构，然后插入当前文档

var docFrag = document.createDocumentFragment();
var li = document.createElement('li');
li.innerHTML = 'Hello World';
docFrag.appendChild(li);

document.querySelector('ul').appendChild(docFrag);

温馨提示

DocumentFragment节点本身不能被插入当前文档，插入文档中的是他里面的子元素

应用场景

多次操作DOM，可以使用DocumentFragment变成一次操作，节省了内存的消耗

Node 节点属性_nodeName

所有 DOM 节点都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础

节点的类型有七种

Document：整个文档树的顶层节点 DocumentType：doctype标签 Element：网页的各种HTML标签 Attribute：网页元素的属性（比如class="right"） Text：标签之间或标签包含的文本 Comment：注释 DocumentFragment：文档的片段

nodeName属性返回节点的名称

// <div id="box">hello world</div>
var box = document.getElementById('box');
var docFrag = document.createDocumentFragment();

console.log(box.nodeName) // "DIV"
console.log(document.nodeName);
console.log(box.getAttributeNode("id")); //id="box"
console.log(box.getAttributeNode("id").nodeName);//id
console.log(box.firstChild.nodeName);
console.log(docFrag.nodeName);

不同节点的nodeName属性值如下

文档节点（document）：#document
元素节点（element）：大写的标签名
属性节点（attr）：属性的名称
文本节点（text）：#text
文档片断节点（DocumentFragment）：#document-fragment
文档类型节点（DocumentType）：文档的类型
注释节点（Comment）：#comment

Node 节点属性_nodeValue

nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写

// <div id="box">hello world</div>
var box = document.getElementById('box');
box.nodeValue // null
box.firstChild.nodeValue // "hello world"
box.firstChild.nodeValue ="hello world!"

Node 节点属性_textContent

textContent属性返回当前节点和它的所有后代节点的文本内容

// <div id="box">This is <span>some</span> text</div>
document.getElementById('box').textContent
// This is some text

Node 节点属性_nextSibling

Node.nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null

// <div id="box1">hello</div><div id="box2">world</div>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
box1.nextSibling === box2 // true

nextSibling属性可以用来遍历所有子节点

var box = document.getElementById('box').firstChild;

while (box !== null) {
  console.log(box.nodeName);
  box = box.nextSibling;
}

<div id="root">
        <p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
    </div>
    <script>
        var rootP = document.getElementById("root").firstChild;
        while(rootP !== null){
            if(rootP.nodeName !== "#text"){//空格或者换行都会导致rootP.nodeName == "#text"
                console.log(rootP.nodeName);//#text P #text P #text P #text (不加if判断的打印)
            }
            rootP = rootP.nextSibling;
        }
    </script>

Node 节点属性_previousSibling

previousSibling属性返回当前节点前面的，距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null

// <div id="box1">hello</div><div id="box2">world</div>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
box2.previousSibling === box1 // tru

Node 节点属性_parentNode

parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）

//自己删除自己的行为
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

Node 节点属性_firstChild/lastChild

firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null

// <p id="p1"><span>First span</span></p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "SPAN"

lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。用法与firstChild属性相同

Node 节点属性_childNodes

childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点

var children = document.querySelector('ul').childNodes;

使用该属性，可以遍历某个节点的所有子节点

var box = document.getElementById('box');
var children = box.childNodes;

for (var i = 0; i < children.length; i++) {
  // ...
}

    <div id="root">
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
        <p>文本信息1</p>
        <p>文本信息2</p>
    </div>
    <script>
        var root = document.getElementById("root");
        console.log(root.childNodes[3]);//第一个p标签
        for(var i = 0;i<root.childNodes.length;i++){
            if(root.childNodes[i].nodeName === "P"){
                console.log(root.childNodes[i]);
                root.childNodes[i].innerHTML = "新的数据" + i//新的数据3  新的数据5
            }
        }
        
    </script>

Node 节点方法_appendChild()

appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点

var p = document.createElement('p');
document.body.appendChild(p);

Node 节点方法_hasChildNodes()

hasChildNodes方法返回一个布尔值，表示当前节点是否有子节点

var foo = document.getElementById('foo');

if (foo.hasChildNodes()) {
  foo.removeChild(foo.childNodes[0]);
}

Node 节点方法_cloneNode()

cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点

var cloneUL = document.getElementById('list').cloneNode(true);

<div id="list">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<div id="root"></div>
var clonelist=document.getElementById('list').cloneNode(false)
var root = document.getElementById("root");
root.appendChild(clonelist)
//<div id="root"><div id="list"></div></div>

Node 节点方法_insertBefore()

insertBefore方法用于将某个节点插入父节点内部的指定位置

insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

    <div id="root">
        <p id="text1">我是文本</p>
    </div>
    <p id="text3">clone文本</p>
    <script>
        var root = document.getElementById("root");
        var text1 = document.getElementById("text1");
        var text2 = document.createElement("p");
        text2.innerHTML = "新的插入内容";
        root.insertBefore(text2,text1);//将text2插入到text1的前面
        var text3 = document.getElementById("text3");
        var result = text3.cloneNode(true);
        root.insertBefore(result,text1);
    </script>
页面结果：
    新的插入内容

    clone文本

    我是文本

    clone文本

Node 节点方法_removeChild()

removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点返回值是移除的子节点

var box = document.getElementById('box');
box.parentNode.removeChild(box);
这个方法是在box的父节点上调用的，不是在box上调用的

    <ul id="list">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3/li>
        <li>内容4</li>
    </ul>
    <script>
        var list = document.getElementById("list");
        console.log(list.childNodes);

        //1.总节点是9个：#text 和 li节点
        //2.我们在循环的时候，在做删除操作，每次删除，list.childNodes.length在减少
        //3.每次都是删除第一个元素：list.childNodes[0] 比如有十个苹果，拿出去一个，数到第十个就没有了
        var len = list.childNodes.length//让长度保持不变
        for(var i= 0;i<len;i++){
            list.removeChild(list.childNodes[0])
        }
    </script>

Node 节点方法_replaceChild()

replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点

replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild

var replacedNode = parentNode.replaceChild(newChild, oldChild);

 <div id="root">
        <h3 id="title">标题</h3>
        <h3 id="content">文本信息</h3>
    </div>
    <script>
        var root = document.getElementById("root");
        var content = document.getElementById("content");
        //创建新节点
        var newContent = document.createElement("p");
        newContent.textContent = "新的内容";
        var result = root.replaceChild(newContent,content);
        console.log(result);//<h3 id="title">标题</h3>
    </script>