JavaScript——DOM
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript——DOM相关的知识，希望对你有一定的参考价值。
DOM操作
为了写这一篇随笔真的是费了好多力气，虽然还是写不好。本来是从周一都开始写的，但是周二周三忙着去帮忙招新了，哈哈哈。感觉做自己喜欢的事特别好玩，虽然挺忙的。看着那些小鲜肉，感觉自己真的老了啊。感觉太久没有更博了，学长估计要打我了。恩~不过我还是很开心。这次写的DOM操作，内容有点多也有点乱。理解还是没有那么透彻，不过一点点积累吧，总会有懂的时候。加油！
【DOM】
DOM（文档对象模型）是针对html和XML文档的一个API（应用程序编程接口）。描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
【节点层次】
DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。文档节点是每个文档的根节点。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。
【Node类型】
DOM1级定义了一个Node接口，该接口将由DOM中所有节点类型实现。这个Node接口在javascript中作为Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型。JavaScript中所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法，但不是所有节点类型都受到web浏览器的支持。
每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的12个数值常量（详情见高程书第三版P248）来表示，任何节点类型必居其一。
要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。对于元素节点，nodeName中保存的始终是元素的标签名，而nodeValue的值始终是null。
每个节点都有一个childNode属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。
要想在IE中将NodeList转换为数组，必须手动枚举所有成员。下列方式也可以将NodeList转换为数组：
function convertToArray(nodes){ var array=null; try{ array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器 }catch(ex){ array=new Array(); for(var i=0;i<nodes.length;i++){ array.push(nodes[i]); } } return array; }
操作节点
appendChild()，用于向childNodes列表的末尾添加一个节点。如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新的位置。而如果想把节点放在在列表中某个特定的位置，可以使用insertBefore()方法（参数为要插入的节点和作为参照的节点）。
replaceChild(要插入的节点，要替换的节点)方法。用该方法插入一个人节点时，该节点的所有关系指针都会从被他替换的节点复制过来。被替换的节点仍然在文档中，但它在文档中已经没有了自己的位置。
【Document属性】
JS通过Document类型表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。
文档的子节点
DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingIn-struction或Comment,还有两个内置的访问其子节点的快捷放肆。第一个就是documentElement属性（始终指向HTML页面中的<html>元素），另一个就是通过childNodes列表访问文档元素。document对象还有一个body属性，直接指向<body>元素。
所有浏览器都支持document.documentElement和document.body属性。
浏览器对document.doctype的支持差别很大，具体如下：
*IE8及之前版本：如果存在文档声明类型声明，会将其错误地解释为一个注释并将把它作为Comment节点；而document.doctype的值始终为null。
*IE9+及Firefox:如果存在文档类型声明，则将其作为文档的第一个子节点；document.doctype是一个DocumrntType节点，也可以通过document.firstChild或document.childNodes[0]访问同一个节点。
*Safari、Chrome和Opera:如果存在文档类型声明，则将其解析，但不作为文档的子节点。document.doctype是一个DocumentType节点，但该节点不会出现在document.childNodes中。
文档信息
作为HTMLDocument的一个实例，document对象还有一些标准的Document对象所没有的属性。比如title属性，包含着<tiele>元素中的文本。其中URL（包含页面完整的URL）、domain（包含页面的域名）、referrer（保存着链接到当前页面的那个页面的URL）。所有这些信息都存在于请求的HTTP头部。这三个属性中，只有domain是可以设置的。
查找元素
查找元素的方法可以有getElementById()和getElementsByTagName()还有getElementsByName()这三种方法。
特殊集合
document.anchors，包含文档中所有带有name特性的<a>元素；
document.forms，包含文档中所有的<from>元素；
docuemnt.imges，包含文档中所有的<img>元素；
docuemnt.links，包含文档中所有带有href特性的<a>元素；
文档写入
将输出流写入到网页中的能力。这种能力主要有write()、writeln()、open()和close()。其中 write()和writeln()方法都接受一个字符串参数，即要写入到输出流的文本。write()会原样写入，而writeln()则会在字符串末尾加一个换行符（\n）。方法open()和close()分别用于打开和关闭网页的输出流。
【Element类型】
用于表现XML和HTML元素，提供了对元素标签名、子节点及特性的访问。
要访问元素的标签名可以使用nodeName属性，也可以使用tagName属性；这两个属性会返回相同的值。
取得特性
操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用。
有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。第一类特性就是style，用于通过CSS为元素指定样式。在通过getAttribute()访问时，返回的style特性中包含的是CSS文本，而通过属性来访问它则会返回一个对象。第二类特性是onclick这样的事件处理程序。通过getAttribute()访问，则会返回相应代码的字符串，而访问onclick属性时，则返回一个JS函数(没有指定时，返回null)。
与getAttribute()对应的方法是setAttribute(),这个方法接受要设置的特性名和值这两个参数。通过setAttribute()方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一换成小写形式。
removeAttribute()，用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。
Element类型是使用attributes属性的唯一一个DOM节点类型。该属性中包含一个NamedNodeMap，与NodeList类似，也是一个动态的集合。
使用document.createElement()方法可以创建新元素。且只接受一个参数，即要创建元素的标签名。
【Text类型】
文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。里面的内容不能包含HTML代码，会被转义。
可以通过nodeValue属性或data属性访问Text节点中包含的文本。这两个属性中包含的值相同。
可以使用document。createTextNode()创建新文本节点，这个方法接受要插入节点中的文本这一个参数。如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格。
用normalize()方法可以将相邻文本节点合并起来。
用splitText()方法可以将一个文本节点分为两个文本节点。
【Comment类型】
注释在DOM中是通过Comment类型来表示的。Comment类型与Text类型继承自相同的基类，因此它拥有除了splitText()之外的其他方法。
【DocumentFragment类型】
所有节点类型中，只有DocumentFragment在文档中没有对应的标记。虽然不能把文档片段直接添加到文档中，但可以将它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。文档片段中的节点不属于文档树。通过appendChild()或insertBefore()将文档片段中内容添加到文档中，即使文档片段作为参数，也只会将子节点添加过去，文档片段本身永远不会成为文档树的一部分。
【DOM操作技术】
【动态脚本】
在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。创建动态脚本一共有插入外部文件和直接插入JavaScript代码这两种方式。动态加载的外部JS文件能够立即运行。
【动态样式】
指的是在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。
如果专门针对IE编写代码，务必小心使用styleSheet.cssText属性。在重用同一个<style>元素并再次设置这个属性时，有可能会导致浏览器崩溃。同样，将cssText属性设置为空字符串也可能导致浏览器崩溃。
【使用NodeList】
NodeList对象都是“动态的”，这就意味着每次访问NodeList对象，都会运行一次查询。
以上是关于JavaScript——DOM的主要内容，如果未能解决你的问题，请参考以下文章
更改页面javascript代码（TamperMonkey）以将键盘笔触发送到父DOM
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段