DOM (文档对象模型)

ANIYM

于 2017-12-19 10:51:54 发布

阅读量189

点赞数

分类专栏： JS 文章标签： dom

本文链接：https://blog.csdn.net/qq_34272315/article/details/78840216

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM (文档对象模型)

document是文档对象模型的一部分。
DOM是一个复合的数据类型。

DOM节点的获得

操作节点，必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
document.getElementById("demo");

通过标签名找到 HTML 元素
document.getElementsByTagName("div");

通过类名找到 HTML 元素
document.getElementsByClassName("a");

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效
标签=document.getElementById("demo"); 通过ID获得标签
他的返回值是一个标签，可以直接使用。获得属性值，设置属性。
标签数组= document.getElementsByTagName("div"); 通过标签名获得标签数组
标签数组= document.getElementsByClassName("a");通过类名获得标签数组
他们两个的返回值是标签数组，习惯性是遍历之后再使用。
特殊情况：数组中的值只有1个。      
document.getElementsByTagName("div")[0];取数组中第一个元素
document.getElementsByClassName("a")[0];取数组中第一个元素

DOM 访问关系（节点的获得）

节点的访问关系，是以属性的方式存在的。
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点  （ parentNode ）   
调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

兄弟节点
Sibling就是兄弟的意思。
Next：下一个的意思。
Previous:前一个的意思。
nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。
nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。
总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling

previousSibling：调用者是节点。IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。
previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。
总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。
下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

单个子节点

firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。
第一个子节点=父节点.lastElementChild|| 父节点.lastChild
1.9.4所有子节点
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点   （他还是W3C的亲儿子 ）
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
      nodeType  ==  1  表示的是元素节点   记住   元素就是标签
      nodeType  ==  2  表示是属性节点   了解
      nodeType  ==  3  是文本节点   了解
子节点数组 = 父节点.childNodes;   获取所有节点。
children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点 
在IE678中，注释节点不要写在里面。
子节点数组 = 父节点.children;   用的最多。



节点自己.parentNode.children[index];随意得到兄弟节点。

作为了解内容：
function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
}
定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所哟与的儿子，只要不是自己就放进数组中。