大家好，我是IT共享者，人称皮皮。

前言

相信做网站对JavaScript再熟悉不过了，它是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript，因为它对做网页方面是有很大作用的。

1.文档对象（DOM）

1).Document对象

这是我们用的最普遍的一个文档对象了，专门用来操作DOM节点时用。

1)).获取元素

document.getElementById()通过id查找HTML元素document.getElementsByName()通过name查找HTML元素document.getElementsByTagName()通过标签名查找HTML元素document.getElementsByClassName()通过类名查找HTML元素document.querySelector(".h")第一个类名为 "h" 的元素document.querySelectorAll("div.no, divh")所有class为"no"或者id为"h"的div元素document.body获取body标签document.documentElement获取html标签

2)).获取网页内容

document.cookie网页cookiedocument.domain文档的域名document.lastModified文档被最后修改的日期和时间document.referrer载入当前文档的文档的URLdocument.title当前文档的标题document.URL当前文档的URLdocument.doctype当前文档的doctypedocument.baseURI当前文档的绝对URIdocument.documentMode浏览器使用的模式document.documentURI文档的URIdocument.implementationDOM实现document.inputEncoding文档的编码（字符集）document.readyState文档的（加载）状态document.strictErrorChecking是否强制执行错误检查

3)).文档写入

document.write(hello world)   向文档写入文本document.writeln(hello world) 向文档写入文本并换行

4)).获取集合

document.all所有html元素document.anchors所有Anchor引用document.forms所有的表单引用document.images所有的图片引用document.links所有的超链接引用document.scripts所有的脚本引用document.embeds所有的流媒体引用

5)).获取节点

childNodes获取子节点的集合 ，返回数组 ，并把换行和空格也当成是节点信息。children获取子节点的集合 ，返回数组firstChild获取第一个子元素  并把换行和空格也当成是节点信息firstElementChild获取第一个子节点lastChild获取最后一个子节点 并把换行和空格也当成是节点信息lastElementChild获取最后一个子节点parentNode获取父节点parentElement获取父节点(IE)offsetParent获取所有父节点  对应的值是body下的所有节点信息previousSibling获取上一个兄弟节点  匹配字符，包括换行和空格，而不是节点previousElementSibling获取上一个兄弟节点  直接匹配节点nextSibling获取下一个兄弟节点  匹配字符，包括换行和空格，而不是节点nextElementSibling获取下一个兄弟节点  直接匹配节点ownerDocument元素的根节点

这里我们获取到了所有的Div元素，我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父，子元素，如下：

6)).创建节点

我们可以自定义节点并添加值，不过要将它添加到文档中去，所以必须添加节点，一般和下方的增加节点配套使用。

document.createElement(标签)创建HTML元素document.createTextNode(文本)给文档添加文本document.createComment(文本)创建一个注释节点document.createDocumentFragment()创建文档粉碎节点

7)).增加节点

appendChild（节点）节点被添加到元素的末尾insertBefore（a,b）a节点会插入b节点的前面

8)).删除节点

removeChild(节点名)被移除的节点仍在文档中，只是文档中已没有其位置了

9)).替换节点

replaceChild(插入的节点，被替换的节点)

10)).复制节点

a.cloneChild()复制a节点,复制出来的节点作为返回值为true时，则a元素后代也一并复制。否则，仅复制a元素本身

11)).节点属性

节点类型 nodeType 有三种情况1.元素节点  2.属性节点  3.文本节点节点名称 nodeName节点值 nodeValue元素节点没节点值，为null文本节点的节点值就是文本属性节点的节点值就是该属性值节点属性获取a.width
a[width]
a.gerAttribute(属性名)  返回指定的属性值
a.gerAttributeNode(属性名) 返回指定的属性节点
节点属性设置
a.width=400a[width]=400a.attributes[width]=400a.setAttribute(width,400) 添加指定的属性
a.setAttributeNode(b) 添加指定的属性节点节点属性删除a.removeChild(子节点)    从元素中移除子节点
a.removeAttribute(属性)  从元素中移除指定属性
a.removeAttributeNode(属性) 移除指定的属性节点，并返回被移除的节点


a.id 获取当前元素的id
a.className  获取当前元素的classa.classList  获取当前元素的class列表a.accessKey=w设置或返回元素的快捷键
a.namespaceURI     返回指定节点的命名空间的 URI
a.dir              设置或返回元素的内容是否可编辑
a.normalize()      合并元素中相邻的文本节点，并移除空的文本节点
a.tabIndex=3设置或返回元素的tab键控制次序
a.tagName          返回元素的标签名
a.textContent      设置或返回节点及其子代的文本内容
a.title            设置或返回元素的标题属性
a.item(num)        返回节点列表中位于指定下标的节点
a.length           返回节点列表中的节点数

12)).获取元素文本

a.innerHTML获取或者设置对象内的HTMLa.innerText获取或者设置对象内的文本a.outerHTML获取或者设置对象外的HTMLa.outerText获取或者设置对象外的文本a.value获取或者设置表单元素的值

总结

这篇文章主要介绍了JavaScript的文档对象。下一篇文章，我们继续介绍JavaScript，敬请期待！

声明：本文部分素材转载自互联网，如有侵权立即删除 。