《JS高程（3）》DOM节点层次Element类型-第10章笔记(13)

本文链接：https://blog.csdn.net/ymc_webpack/article/details/54880327

除了Document类型之外，Element类型是Web编程中最常用的类型。

Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。

nodeType的值：	1
nodeName的值：	元素的标签名
nodeValue的值：	null
parentNode的值：	Document/Element
子节点	Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference

<div id = "myDiv"></div>
var div = document.getElementById("myDiv");
// HTML中，标签名始终都以全部大写表示
//XML(XHTML标签名始终会与源代码保持一致)
alert(div.tagName);//"DIV"
alert(div.tagName == div.nodeName)//true

HTML元素

id	元素在文档中的唯一标识符
title	通过工具提示条显示出来
lang	元素内容的语言代码
dir	语言方向，值为“ltr”(从左至右)或”rtl”(从右至左)很少用
className	与元素的class特性对应，即为元素指定的CSS类

<div id = "myDiv" class = "bd" title = "body text" lang = "en" dir = "ltr">

var div = document.getElementById("myDiv");
alert(div.id);  //"myDiv"
alert(div.className);  //"bd"
alert(div.title);  //"body text"
alert(div.lang);  //"en"
alert(div.dir); //"ltr"

取得和修改特性

每个元素都有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息，操作特性的DOM方法主要有三个：

方法	参数	功能
getAttribute()	接收一个参数：与实例名相同	获取自定义特性
setAttribute()	接收两个参数：要设置的特性名和值	修改或创建该属性并设置相应的值
removeAttribute()	接受一个参数：所要删除的元素名	彻底删除元素的特性

var div = document.getElementById("myDiv");
alert (div.getAttribute("id")); //"myDiv"

getAttribute()不经常使用，，只是用对象的属性，在取得自定义特性值的情况下，才会是有用getAttribute().

attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型。
attributes属性中包含一个NameNodeMap,与NodeList类似，是一个动态集合。

创建元素

方法	参数	功能
document.createElement()	接收一个参数：既要创建元素的标签名	创建新元素

var div = document.createElement("div");
//将元素添加到<body>元素中
document.body.appendChild(div);

元素的子节点

元素可以由任意树木的子节点和后代节点，因为元素可以是其他元素的子节点。

<ul id = "myList">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

在IE浏览器中，< ul>元素有3个子节点，分别是3个< li>元素；在其他浏览器中有7个元素，分别是3个< li>元素和4个文本节点（< li>元素的空百符），把所有的空白符删除，那么所有浏览器就会返回相同的子节点。
因此在执行某项操作前，都要先检查一下nodeType属性：

for (var i = 0, len = element.childNodes.length; i < len; i++){
//遍历子节点，当子节点的nodeType等于1的情况下，才会执行某些操作
    if(element.childNodes[i].nodeType == 1){
        //执行某些操作
    }
}