温故js系列（6）-DOM

2024年4月11日 129次阅读 来源: xzavier

前端进修：教程&开辟模块化/规范化/工程化/优化&东西/调试&值得关注的博客/Git&口试-前端资本汇总

迎接提issues指正：DOM

JavaScript-DOM

DOM简介

DOM（Document Object Model）即文档对象模子，针对HTML 和XML 文档的API（运用顺序接口）。DOM 描写了一个条理化的节点树，运转开辟人员增添、移除和修正页面的某一部份。经由过程 DOM，能够接见一切的 HTML 元素，连同它们所包括的文本和属性。能够对个中的内容举行修正和删除，同时也能够建立新的元素。document对象是文档的根节点，window.document属性就指向这个对象。

DOM节点

分为元素节点、属性节点和文本节点。
而这些节点又有三个异常有效的属性，离别为：nodeName、nodeType 和nodeValue

节点范例       nodeName     nodeType     nodeValue
  元素          元素称号       1           null
  属性          属性称号       2          属性值
  文本           #text        3     文本内容(不包括html)

F12翻开console，即可操纵当前网页节点：

document.getElementById('mainLike').nodeName  //"BUTTON"
document.getElementById('mainLike').nodeType  //1
document.getElementById('mainLike').nodeValue //null
document.getElementById('mainLike').getAttributeNode("class").nodeName //"class"
document.getElementById('mainLike').getAttributeNode("class").nodeType //2
document.getElementById('mainLike').getAttributeNode("class").nodeValue //"btn btn-success btn-lg mr10"
document.getElementById('mainLike').firstChild.nodeName  //"#text" 关于一切文本节点nodeName都是"#text"
document.getElementById('mainLike').firstChild.nodeType  //3
document.getElementById('mainLike').firstChild.nodeValue  //"0 引荐"

DOM元素挑选

      要领                      申明                  备注
getElementById()          猎取特定ID元素的节点       猎取单个节点对象
getElementsByClassName()  猎取指定class类的节点列表  返回值为节点数组
getElementsByTagName()    猎取雷同元素的节点列表     返回值为节点数组
getElementsByName()       猎取雷同称号的节点列表     返回值为节点数组
querySelector             猎取class第一个或id的节点  返回值为一个节点对象
querySelectorAll          猎取class或id的节点列表    返回值为节点数组

jQuery在挑选器上做的异常好，运用的挑选器引擎Sizzle占了jQuery很大一部份。延长：jQuery挑选器浅析

querySelectorAll 和getElementsBy猎取节点数组系列要领有一个很主要的区分：
querySelectorAll 返回的是一个 Static Node List
getElementsBy系列的返回的是一个 Live Node List

细致可拜见知乎发问，答案很细致

猎取HTML元素属性

属性         申明
id        元素节点的id 称号
title     元素节点的title 属性值
style     CSS 内联款式属性值
className CSS 元素的类

document.getElementById('xzavier').id; //猎取id
document.getElementById('xzavier').id = 'man'; //设置id
document.getElementById('xzavier').title; //猎取title
document.getElementById('xzavier').title = '题目' //设置title
document.getElementById('xzavier').style; //猎取CSSStyleDeclaration对象
document.getElementById('xzavier').style.color; //猎取style对象中color的值
document.getElementById('xzavier').style.color = 'red'; //设置style对象中color的值
document.getElementById('xzavier').className; //猎取class
document.getElementById('xzavier').className = 'xzavier'; //设置class

属性要领

getAttribute()            猎取特定元素节点属性的值
setAttribute()            设置特定元素节点属性的值
removeAttribute()         移除特定元素节点属性

getAttribute()要领

getAttribute()要领将猎取元素中某个属性的值。它和直接运用.属性猎取属性值的要领有
肯定区分。

document.getElementById('xzavier').getAttribute('id');//猎取元素的id 值
document.getElementById('xzavier').id; //猎取元素的id 值
document.getElementById('xzavier').getAttribute('mydiv');//猎取元素的自定义属性值
document.getElementById('xzavier').mydiv //猎取元素的自定义属性值，非IE 不支撑
document.getElementById('xzavier').getAttribute('class');//猎取元素的class 值，IE 不支撑
document.getElementById('xzavier').getAttribute('className');//非IE 不支撑

这里说一下attribute和property的区分，基础能够总结为attribute节点都是在HTML代码中可见的，而property只是一个一般的名值对属性。

Property：属性，一切的HTML元素都由HTMLElement范例示意，HTMLElement范例直接继续自Element并增添了一些属性，增添的这些属性离别对应于每一个HTML元素都有下面的这5个规范特征: id,title,lang,dir,className。DOM节点是一个对象，因而，他能够和其他JavaScript对象一样增添自定义的属性以及要领。property的值能够是任何的数据范例，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。

Attribute：特征，区分于property，attribute只能是字符串，大小写不敏感，出现在innerHTML中，经由过程类数组attributes能够排列一切的attribute。

雷同之处
规范的 DOM properties 与 attributes 是同步的。公认的（非自定义的）特征会被以属性的情势增添到DOM对象中。如，id，align，style等，这时刻操纵property或许运用操纵特征的DOM要领如getAttribute()都能够操纵属性。不过传递给getAttribute()的特征名与现实的特征名雷同。因而关于class的特征值猎取的时刻要传入“class”。

差别之处
1).关于有些规范的特征的操纵，getAttribute与点号(.)猎取的值存在差别性。如href，src，value，style，onclick等事宜处置惩罚顺序。
2).href：getAttribute猎取的是href的现实值，而点号猎取的是完全的url，存在浏览器差别。

setAttribute()要领

setAttribute()要领将设置元素中某个属性和值。它须要接收两个参数：属性名和值。如
果属性自身已存在，那末就会被掩盖。

document.getElementById('xzavier').setAttribute('align','center');//设置属性和值
document.getElementById('xzavier').setAttribute('xzavier','123456');//设置自定义的属性和值

removeAttribute()要领

removeAttribute()能够移除HTML 属性。

document.getElementById('xzavier').removeAttribute('style');//移除属性

PS：IE6 及更低版本不支撑removeAttribute()要领。

条理节点属性

节点的条理构造能够划分为：父节点与子节点、兄弟节点这两种。当我们猎取个中一个元素节点的时刻，就能够运用条理节点属性来猎取它相干条理的节点。

   属性                申明
childNodes      猎取当前元素节点的一切子节点
firstChild      猎取当前元素节点的第一个子节点
lastChild       猎取当前元素节点的末了一个子节点
ownerDocument   猎取该节点的文档根节点，相称与document
parentNode      猎取当前节点的父节点
previousSibling 猎取当前节点的前一个同级节点
nextSibling     猎取当前节点的后一个同级节点
attributes      猎取当前元素节点的一切属性节点鸠合

节点操纵

      要领                申明
write()           把恣意字符串插进去到文档中
createElement()   建立一个元素节点
appendChild()     将新节点追加到子节点列表的末端
createTextNode()  建立一个文件节点
insertBefore()    将新节点插进去在前面
repalceChild()    将新节点替代旧节点
cloneNode()       复制节点
removeChild()     移除节点

document.write('<p>这是一个段落！</p>')';  //把恣意字符串插进去到文档中去
var xzavier = document.getElementById('xzavier'); //猎取某一个元素节点
var p = document.createElement('p'); //建立一个新元素节点<p>
xzavier.appendChild(p); //把新元素节点<p>增添子节点末端
var text = document.createTextNode('段落'); //建立一个文本节点
p.appendChild(text); //将文本节点增添到子节点末端
xzavier.parentNode.insertBefore(p, xzavier); //把<div>之前建立一个节点
xzavier.parentNode.replaceChild(p,xzavier); //把<div>换成了<p>
var clone = xzavier.firstChild.cloneNode(true); //猎取第一个子节点，true 示意复制内容
xzavier.appendChild(clone); //增添到子节点列表末端
xzavier.parentNode.removeChild(xzavier); //删除指定节点

DOM操纵内容

innerText

document.getElementById('xzavier').innerText; //猎取文本内容(若有html 直接过滤掉)
document.getElementById('xzavier').innerText = 'xzavier'; //设置文本(若有html 转义)

除了Firefox 以外，其他浏览器均支撑这个要领。但Firefox 的DOM3级供应了别的一个相似的属性：textContent，做上兼容即可通用。

document.getElementById('xzavier').textContent; //Firefox 支撑

兼容一下：

function getInnerText(element) {
    return (typeof element.textContent == 'string') ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
    if (typeof element.textContent == 'string') {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

innerHTML

document.getElementById('xzavier').innerHTML; //猎取文本(不过滤HTML)
document.getElementById('xzavier').innerHTML = '<b>xzavier</b>'; //可剖析HTML

虽然innerHTML 能够插进去HTML，但自身照样有肯定的限定，也就是所谓的作用域元素，脱离这个作用域就无效了。

xzavier.innerHTML = "<script>alert('xzavier);</script>"; //<script>元素不能被实行
xzavier.innerHTML = "<style>background:red;</style>"; //<style>元素不能被实行

另有两个要领outerText，outerHTML基础不怎么用。最经常使用的innerHTML 属性和节点操纵要领的比较，在插进去大批HTML 标记时运用innerHTML 的效力显著要高许多。由于在设置innerHTML 时，会建立一个HTML 剖析器。这个剖析器是浏览器级别的(C++编写)，因而实行JavaScript 会快的多。但，建立和烧毁HTML 剖析器也会带来机能丧失。最好控制在最合理的范围内。

猎取元素大小

clientWidth 和clientHeight

这组属机能够猎取元素可视区的大小，能够获得元素内容及内边距所占有的空间大小。

xzavier.clientWidth; //400
xzavier.clientHeight //400

返回了元素大小，但没有单元，默许单元是px
1.增添边框，无变化
2.增添外边距，无变化
3.增添转动条，最终值即是底本大小减去转动条的大小
4.增添内边距，最终值即是底本大小加上内边距的大小

scrollWidth 和scrollHeight

这组属机能够猎取转动内容的元素大小。

xzavier.scrollWidth; //400
xzavier.scrollWidth; //400

1.增添内边距，最终值会即是底本大小加上内边距大小
2.增添转动条，最终值会即是底本大小减去转动条大小

offsetWidth 和offsetHeight

这组属机能够返回元素现实大小，包括边框、内边距和转动条。

xzavier.offsetWidth;  //400
xzavier.offsetHeight; //400

返回了元素大小，默许单元是px。假如没有设置任何CSS 的宽和高度，他会获得盘算后的宽度和高度。
1.增添边框，最终值会即是底本大小加上边框大小
2.增添内边距，最终值会即是底本大小加上内边距大小
3.增添外边据，无变化
4.增添转动条，无变化，不会减小

clientLeft 和clientTop

这组属机能够猎取元素设置了左边框和上边框的大小。

xzavier.clientLeft; //猎取左边框的长度
xzavier.clientTop; //猎取上边框的长度

offsetLeft 和offsetTop

这组属机能够猎取当前元素相干于父元素的位置。

xzavier.offsetLeft; //20
xzavier.offsetTop;  //20

猎取元素当前相干于父元素的位置，最好将它设置为定位position:absolute；不然差别的浏览器会有差别的诠释。加上边框和内边距不会影响它的位置，但加上外边据会累加。

scrollTop 和scrollLeft

这组属机能够猎取转动条被隐蔽的地区大小，也可设置定位到该地区。

xzavier.scrollTop;  //猎取转动内容上方的位置
xzavier.scrollLeft; //猎取转动内容左方的位置

转动条回顶部

function scrollStart(element) {
    if (element.scrollTop != 0) element.scrollTop = 0;
}

document对象属性

     属性                      申明
document.title             设置文档题目
document.linkColor         未点击过的链接色彩
document.alinkColor        激活链接的色彩
document.vlinkColor        已点击过的链接色彩
document.URL               设置URL属性
document.fileSize          文件大小，只读属性
document.cookie            设置和读取cookie
document.charset           设置字符集

一般来说用的多的也就title，URL，cookie，charset等，其他的就不列了。

先写这么些，打篮球去了。代码，篮球，生涯…DOM有太多内容了，多多进修，多多总结

    原文作者：xzavier
    原文地址: https://segmentfault.com/a/1190000006623511
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞