DOM（文档对象模型）基础加强
DOM（文档对象模型）基础加强
文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用。
模型：所有的标记型文档都具有一些共性特征的一个体现。
用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签、文本、属性）都封装成对象。
封装成对象的目的：是为了更方便的操作这些文档及其文档中的所有内容。因为对象包含属性和行为。
标记型文档包含标签、属性、标签中封装的数据。只要是标记型文档，DOM这种技术都可以对其进行操作。
常见的标记型文档包括：HTML、XML。
DOM要操作标记型文档必须先进行解析。DOM结构模型图如下所示：
DOM的三个级别和DHTML介绍
DOM模型有三种：
DOM level 1：将html文档封装成对象。
DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
DOM level 3：支持xml1.0的一些新特性。
DHTML
动态的HTML，它不是一门语言，是多项技术综合体的简称。
包括html、css、dom、javascript。
这四种语言的职责：
html：负责提供标签，封装数据，这样便于操作数据。
css：负责提供样式，对标签中的数据进行样式定义。
dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。
javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。NODE接口的特性和方法
特性/方法 类型/返回类型 说明
nodeName String 节点的名字；根据节点的类型而定义 元素节点返回元素名称，属性节点返回属性名称，文本节点返回内容为#text的字符串
nodeValue String 节点的值；根据节点的类型而定义 元素节点返回null，属性节点返回属性的值，文本节点返回文本节点的内容
nodeType Number 节点的类型常量值之一 元素节点返回1，属性节点返回2，文本节点返回3
nodeName(只读)
nodeType(只读)
nodeValue(可读可写)
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点
childNodes NodeList 所有子节点的列表
parentNode Node 返回一个给定节点的父节点
previousSibling Node 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling Node 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes() Boolean 当childNodes包含一个或多个节点时，返回真
attributes NamedNodeMap 包含了代表一个元素的特性的Attr属性对象；仅用于Element元素节点
appendChild(node) Node 将node添加到childNodes的末尾
removeChild(node) Node 从childNodes中删除node
replaceChild(newnode, oldnode) Node 将childNodes中的oldnode替换成newnode
insertBefore(newnode, refnode) Node 在childNodes中的refnode之前插入newnodeDocument 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象的集合
all[] 提供对文档中所有 HTML 元素的访问，返回对文档中所有 HTML 元素的引用。
语法
document.all[i]
document.all[name]
document.all.tags[tagname]
all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。
all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。
尽管如此，这个 all[] 数组在已有的代码中仍然使用。
forms[] 返回对文档中所有 Form 对象引用。
语法
document.forms[]
Document 对象的属性
body 提供对 <body> 元素的直接访问，对于定义了框架集的文档，该属性引用最外层的 <frameset>。
Document 对象的常用方法
getElementById("属性id的值") 返回对拥有指定 id 的第一个对象的引用
getElementsByName("属性name的值") 返回带有指定名称的对象集合
getElementsByTagName("标签名称") 返回带有指定标签名的对象集合
write() 向文档写 HTML 表达式 或 JavaScript 代码
示例代码如下：
Element 对象
Element 对象的方法
getAttitude("属性名称") 获取属性的值
setAttribute("属性名称", "属性的值") 设置属性
removeAttribute("属性名称") 删除属性
在 Element 对象中查找 Element 对象
在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName("标签名称")方法。而该方法返回的是一个集合。
示例代码如下：
Node 常用属性
节点名称
nodeName：其内容是给定节点的名字。
如果给定节点是一个元素节点，nodeName返回这个元素的名称(标签名)。
如果给定节点是一个属性节点，nodeName返回这个属性的名称(属性名)。
如果给定节点是一个文本节点，nodeName返回一个内容为 #text 的字符串。
节点类型
nodeType：返回一个整数，这个数值代表着给定节点的类型。
如果给定节点是一个元素节点，nodeType返回值是1。
如果给定节点是一个属性节点，nodeType返回值是2。
如果给定节点是一个文本节点，nodeType返回值是3。
节点的值
nodeValue：返回给定节点的当前值（字符串）。
如果给定节点是一个元素节点，nodeValue返回值是 null。
如果给定节点是一个属性节点，nodeValue返回值是这个属性的值。
如果给定节点是一个文本节点，nodeValue返回值是这个文本节点的内容。
示例代码：
父节点、子节点和同辈节点
父节点：
parentNode; 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
注意：document 节点的没有父节点。
子节点：
childNodes; 获取指定节点的所有子节点集合。
firstChild; 获取指定节点的第一个子节点。
lastChild; 获取指定节点的最后一个子节点。
同辈节点：
nextSibling; 返回一个给定节点的下一个兄弟节点。
previousSibling; 返回一个给定节点的上一个兄弟节点。
IE6-8 Chrome IE9-10 Chrome & FireFox Chrome
firstChild; 第一个节点 firstElementChild; 第一个节点
lastChild; 最后一个节点 lastElementChild; 最后一个节点
nextSibling; 下一同级节点 nextElementSibling; 下一同级节点
previousSibling; 上一同级节点 previousElementSibling; 上一同级节点节点属性
节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点（特别是元素节点）的属性。
事实上，attributes中包含的是一个节点的所有属性的集合。
attributes.getNameItem()和Element对象的getAttribute()方法类似。检测子节点和属性
查看是否存在子节点方法： hasChildNodes()
查看是否存在属性方法：hasAttributes()
即使节点中没有定义属性，其 attributes; 属性仍然有效的，而且长度值为0。同样节点中的 childNodes; 属性也是如此。
当你想知道某个节点是否包含子节点和属性时，可以使用 hasChildNodes() 和 hasAttributes() 方法。
但是，如果还想知道该节点中包含多少子节点和属性的话，仍要使用 attributes; 和 childNodes; 属性。
在IE浏览器中，不存在 hasAttributes() 方法！操作 DOM 节点树
插入节点:
appendChild()方法
insertBefore(new, old)方法
没有insertAfter()方法
示例代码：
innerHTML属性
浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。
innerHTML 属性多与div或span标签配合使用。
示例代码：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录