你的位置:首页 > Java教程

[Java教程]DOM的相关概念


【前面的话】DOM全称是Document Object Model,即文档对象模型。我们常说的html文档其实就是一个DOM树,DOM操作就是在内存中找到DOM树上我们想要的DOM对象,对它的属性进行修改,然后渲染引擎会把修改的结果重新绘制在界面上。DOM里面涵盖的知识点还是很多的,尤其是到后来要兼容浏览器的时候是很绕的,这次先讲一些DOM的相关概念,等聊完BOM之后,我会再针对兼容浏览器这块做个小总结。

1、节点的属性:

① nodeType

//节点//nodeType 1-元素节点 , 2-属性节点 , 3-文本节点

② nodeName

// nodeName 如果是标签则返回的是标签的名称;如果是文本则返回的是#text;如果是属性节点则返回属性的名称

③ nodeValue

// nodeValue 如果是标签则始终返回null ; 如果是文本节点则返回文本的内容 ; 如果是属性节点则返回属性的值

④节点的复制

  element.cloneNode();  // 克隆一个新的DOM对象;参数为Boolean类型,true赋值子节点,false不复制子节点  element.appendChild(); // 追加元素


2、自定义属性:
    2.1 任何浏览器都可以通过dom对象获取到标签的预定义属性
    2.2 chrome,新版IE(9及以上)无法获取标签的自定义属性;但IE8以前是可以通过dom对象获取到标签的自定义属性
    2.3 如何在任何浏览器中显示自定义属性呢??
            ——getAttribute可以获取标签的预定义属性;通过自定义属性获得的类型都是String
            ——设置属性的值:element.setAttribute(name,value)
            ——移除属性:element.removeAttribute(name)
附:
1 element.className = " ";   //仅删除class类的值,保留类名2 element.removeAttribute("class")  //完全删除这个类

    2.4 属性的相关操作
1 // 获取属性节点2   var attrNode = box.getAttributeNode("id");3   console.log(attrNode.nodeType);  //属性节点的nodeType  24   console.log(attrNode.nodeName);  //属性节点的nodeName 属性的名称5   console.log(attrNode.nodeValue);  //属性节点的nodeValue 属性的值6     7 // 设置属性 setAttribute8     9 // 移除属性 removeAttribute





3、层次结构
——父节点:parentNode

    ① 子节点: 
1 childNodes 所有的子节点——DOM标准的方法,除了获取子标签以外,还会获取文本节点;IE8以前会忽略空白节点2 children 所有的子元素——非标准的DOM方法,但是几乎所有的浏览器都支持,只会获取元素节点


    ② 兄弟节点,所有浏览器都支持
1  element.nextSibling 下一个兄弟节点,可能是非元素节点,会获取到文本节点2 element.nextElementSibling 获取下一个紧邻的兄弟元素,会忽略空白  // IE8以前不支持此属性3     4  element.previousSibling 上一个兄弟节点,可能是非元素节点,会获取到文本节点5 element.previousSibling 获取上一个紧邻的兄弟元素,会忽略空白 // IE8以前不支持此属性

    ③兄弟元素,IE8以前不支持
1  previousElementSibling 上一个兄弟节点2 nextElementSibling 下一个兄弟节点