学习DOM

最新推荐文章于 2020-06-14 13:53:53 发布

NoTelecom

最新推荐文章于 2020-06-14 13:53:53 发布

阅读量215

点赞数

分类专栏： JS 文章标签： DOM 前端 js JavaScript

本文链接：https://blog.csdn.net/yuanfangyoushan/article/details/81348892

版权

20 篇文章 0 订阅

订阅专栏

DOM官方定义是指针对HTML和XML文档是一个API(应用程序编程接口)，允许开发人员添加，移除和修改页面一部分，开始学的时候有点不好理解，所以这样举个例子吧：我们有一段HTML，我们如何直接在js里访问某层的某个节点呢，或者说如何把最后一个节点移动到第一个节点上面去。

　DOM就是定义了做类似操作应该怎么做的标准，比如用getElementById来访问节点，用insertBefore来插入节点。当浏览器载入HTML时，会生成相应的DOM树。

　　因此，DOM可以理解为一个访问或操作HTML各种标签的实现标准。

每一段HTML标记都有其对应的节点，例如：

　　HTML元素通过元素(elemen)节点表示，注释通过注释节点(commen)表示，文档类型通过文档类型节点(document)表示等。

　　其中一共定义了12种节点类型，而这些类型又都继承自Node类型也就是说Node这个接口可以将DOM中所有节点类型实现。

所以我们最初就应该把Node这种最基本的类型搞清楚：

nodeValue， nodeName， nodeType三个属性：nodeType是节点类型，nodeName是标签名(不是id或者class）,nodeValue是节点的值.
childNodes，parentNode,previousSibling,nextsSibling属性 :每个节点都有这样一个属性childNodes，它可以返回一个类似于动态数组的NodeList对象，而这个对象有length属性，item()方法;parentNode与childNodes相对，它指向文档树的父节点，用previousSibling,nextsSibling可访问兄弟节点。
appendChild(),replaceChild(),insertBefore(),cloneChild(),removeChild():其中 appendChild()和removeChild()用来增删节点，replaceChild()提供给插入的节点和要替换的节点可完成替换，appendChild()和insertBefore()不同在于添加的位置存在差异，而cloneChild()分为深复制和浅复制。

这个类型最重要的是它的一个子类HTMLDocument有一个实例对象document。而这个document对象是我们最常用的一个对象。那么它的方法和属性有哪些呢：

documentElement，body，doctype属性：documentElement，body分别指向<html>和<body>,doctype取得对<!DOCTYPE>的引用。
document.childNodes 继承自上面讲的Node类型，可以返回文档的直接子节点。
document.title 可以修改页面的title，document.URL 页面的url,document.referrer 取得referrer，也就是打开这个页面的那个页面的地址，document.domain 取得域名(可以设置)。
getElementById() 和 getElementsByTagName()：是分别根据id和标签取得元素，而且 getElementsByTagName()返回的是一个HTMLCollection类型(与NodeListk类似，可用item()或下标访问)。
write() writeln() open() close()：open和close分别是打开和关闭网页的输出流，而write和writeln，它们都是向页面写入东西，区别就是后者会多加入一个换行符。

常用的就是元素节点Element:

Element是除Document以外最常用的一种类型，它提供了对元素标签名，子节点及特性的访问.

需要注意的是，要操作Element对象，先得用Document获得该对象。

tagName：相当于nodeName，但是

if(element.tagName.toLowerCase()=="div"){}
//需要加上.toLowerCase()，因为div.tagName实际上输出为DIV

HTML元素：HTMLElement类型继承自Element类型，也是HTML元素的实际类型。这个类型有属性id，title，className等等，而且统统都是可读写的。
getAttribute() 、setAttribute() 、removeAttribute():这三个都是操作节点属性的方法（多用于处理自定义的属性）:getAttribute()的参数是一个特性名，这个方法可以访问特性值；setAttribute()则是设置特性，因此它的两个参数分别是设置的特姓名和特性值；而removeAttribute()可彻底删除元素的特性。
document.createElement()：可创建一个元素，创建新元素的顺序是先用document.createElement()创建，然后用刚刚提到的setAttribute()设置属性，　但是做完这些之后，这个元素还是没有在页面中，所以你必须通过类似于appendChild这些方法把元素添加到页面里面。

对于元素节点 nodeName就是标签名，nodeValue就是null

这是一个非常特殊的元素，因为它一定没有子节点，然后还是来说说它的属性和一些方法：

<ul>
     <li></li>
     <li></li>
</ul>

　　如上图有一个小问题，ul的第一个子节点（firstChild）是什么呢？第一眼看过去，肯定认为是li了，但是实际上，你会发现不是li，而是一个文本节点！

　　这是因为浏览器认为ul和第一个li之间有空白字符，所以就有文本节点了。　　这里一个常见的问题就是遍历ul的childNodes的时候，遍历的元素一定要判断下nodeType是不是等于1（等于1就代表是元素节点），这样才能跳过这个坑。否则你也可以删除所有的空格和换行符。

访问Comment节点的内容，也可以通过nodeValue或者data属性。

DOM0：不是W3C规范。

DOM1：开始是W3C规范。专注于HTML文档和XML文档。

DOM2：对DOM1增加了样式表对象模型

DOM3：对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。

DOM扩展是浏览器自己扩展的，所以使用前兼容性问题一定要注意通过 document.compatMode和新的document.documentMode判断“标准模式”和“混杂模式”

关注

专栏目录