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

来源：互联网发布：fl studio12破解版mac 编辑：程序博客网时间：2024/06/05 04:00

除了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){        //执行某些操作    }}

0 0