网站导航
> 文档中心 > JS基础知识DOM+BOM

JS基础知识DOM+BOM

网友: 文档中心 2022-03-21 22:06:53

目录

DOM概述

节点

节点树

Node.nodeType属性

document 对象_属性

document.doctype

document.documentElement

document.body，document.head

document.forms

document.images

document.scripts

document.domain

document对象_方法/获取元素

document.getElementsByTagName()

document.querySelector()，document.querySelectorAll()

document.createElement()

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

Element对象

Element.id

Element.tagName

Element.className，Element.classList

Element.innerHTML

Element.innerText

Element获取元素位置一

Element.clientHeight，Element.clientWidth

Element.clientLeft，Element.clientTop

Element.scrollHeight，Element.scrollWidth

Element获取元素位置二

Element.scrollLeft，Element.scrollTop

Element.offsetHeight，Element.offsetWidth

Element.offsetLeft，Element.offsetTop

Attribute属性的操作

Element.getAttribute()

Element.setAttribute()

Element.hasAttribute()

Element.removeAttribute()

dataset 属性

Text 节点

 Node 节点属性_nodeName

 Node 节点属性_nodeValue

Node 节点属性_textContent

Node 节点属性_nextSibling

Node 节点属性_previousSibling

Node 节点属性_parentNode

Node 节点属性_firstChild/lastChild

Node 节点属性_childNodes

Node 节点方法_appendChild()

Node 节点方法_hasChildNodes()

Node 节点方法_cloneNode()

Node 节点方法_insertBefore()

Node 节点方法_removeChild()

Node 节点方法_replaceChild()

DOM概述

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）

浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言

节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子

节点的类型有七种

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

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树

浏览器原生提供document节点，代表整个文档

1document

2// 整个文档树

除了根节点，其他节点都有三种层级关系

父节点关系（parentNode）：直接的那个上级节点 子节点关系（childNodes）：直接的下级节点 同级节点关系（sibling）：拥有同一个父节点的节点

Node.nodeType属性

不同节点的nodeType属性值和对应的常量如下

文档节点（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，指向节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成。如果网页没有声明 DTD，该属性返回null

var doctype = document.doctype;doctype // ""

document.documentElement

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

document.documentElement

document.body，document.head

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

document.forms

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

var selectForms = document.forms;

document.images

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

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

document.scripts

document.scripts属性返回所有节点

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 代码为 
var p = document.querySelector('p');p.id // "foo"

Element.tagName

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

// HTML代码为// Hellovar span = document.getElementById('myspan');span.id // "myspan"span.tagName // "SPAN"

Element.className，Element.classList

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

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

// HTML 代码 
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对象有下列方法。

  1. add()：增加一个 class。
  2. remove()：移除一个 class。
  3. 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 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括和元素。

如果将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.scrollHeightdocument.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.scrollLeftdocument.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返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移

    
.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代码为// 
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 代码为// 
document.getElementById('box').removeAttribute('align');// 现在的HTML代码为//

dataset 属性

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

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

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

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

Text 节点

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

Text节点属性

data

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

Hello World
// 读取文本内容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节点尾部追加字符串

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

deleteData()

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

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

insertData()

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

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

replaceData()

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

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

substringData()

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

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

remove()

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

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

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属性返回节点的名称

// 
hello world
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);//idconsole.log(box.firstChild.nodeName);console.log(docFrag.nodeName);

不同节点的nodeName属性值如下

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

 Node 节点属性_nodeValue

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

// 
hello world
var box = document.getElementById('box');box.nodeValue // nullbox.firstChild.nodeValue // "hello world"box.firstChild.nodeValue ="hello world!"

Node 节点属性_textContent

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

// 
This is some text
document.getElementById('box').textContent// This is some text

Node 节点属性_nextSibling

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

// 
hello
world
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;}
 
内容1
 
内容2
 
内容3
    
     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; }

Node 节点属性_previousSibling

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

// 
hello
world
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

// 
First span
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++) {  // ...}
    
 
         
  • 列表1
    •      
  • 列表2
    •      
  • 列表3
    •  
 
文本信息1
 
文本信息2
    
     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     } }

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);
    
     
  • 1
    •  
  • 2
    •  
  • 3
    •     
var clonelist=document.getElementById('list').cloneNode(false)var root = document.getElementById("root");root.appendChild(clonelist)//

Node 节点方法_insertBefore()

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

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

var insertedNode = parentNode.insertBefore(newNode, referenceNode);
    
 
我是文本
    
    
clone文本
     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);    页面结果：    新的插入内容    clone文本    我是文本    clone文本

Node 节点方法_removeChild()

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

var box = document.getElementById('box');box.parentNode.removeChild(box);这个方法是在box的父节点上调用的，不是在box上调用的
    
     
  • 内容1
    •  
  • 内容2
    •  
  • 内容3/li> 
  • 内容4
    •     
     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]) }

Node 节点方法_replaceChild()

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

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

var replacedNode = parentNode.replaceChild(newChild, oldChild);
 
 
标题
 
文本信息
    
     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);//
标题

网络标签：

相关问题