DOM之节点层级-Element 类型

 一  HTML元素的属性

• id：元素在文档中的唯一标识符
• title：包含元素的额外信息，通常以提示条形式展示
• lang：元素内容的语言代码
• dir：语言的书写方向（"ltr"表示从左到右   "rtl"表示从右到左）
• className 相当于class属性，用于指定元素的CSS类

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

// 这个元素中的所有属性都可以使用下列 JavaScript 代码读取
let 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" 

// 可以使用下列代码修改元素的属性：
div.id = "someOtherId"; 
div.className = "ft"; 
div.title = "Some other text"; 
div.lang = "fr"; 
div.dir ="rtl"; 

 

 

关于属性操作

二 取得属性

• getAttritube()：
  • 要点：
    • 可以取得不是HTML语言正式属性的自定义属性的值
    • 属性名不区分大小写

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div> 
let div = document.getElementById("myDiv"); 
alert(div.getAttribute("id")); // "myDiv" 
alert(div.getAttribute("class")); // "bd" 
alert(div.getAttribute("title")); // "Body text" 
alert(div.getAttribute("lang")); // "en" 
alert(div.getAttribute("dir")); // "ltr"

// getAttribute()方法也能取得不是 HTML 语言正式属性的自定义属性的值。比如下面的元素：
<div id="myDiv" my_special_attribute="hello!"></div> 
// 这个元素有一个自定义属性 my_special_attribute，值为"hello!"
// 可以像其他属性一样使用, getAttribute()取得这个属性的值：
let value = div.getAttribute("my_special_attribute"); 

区别	通过DOM对象访问属性	通过getAttritube()访问属性
获取属性	HTMLElement上定义的直接映射对应属性的5个属性 所有公认（非自定义）的属性会被添加为DOM对象的属性	可以取得不是HTML语言正式属性的自定义属性的值
style属性	CSSStyleDeclaration对象	CSS字符串
事件处理程序/事件属性	一个JavaScript函数	字符串形式的源代码
总结	只使用对象属性	取得自定义属性的值

三 设置属性

• setAttritube()
  • 参数：要设置的属性名  属性的值
    • 设置的属性名会规范为小写形式
  • 场景：
    • 属性已存在，会以指定的值替换原来的值
    • 属性不存在，会以指定的值创建该属性

div.setAttribute("id", "someOtherId"); 
div.setAttribute("class", "ft"); 
div.setAttribute("title", "Some other text"); 
div.setAttribute("lang","fr"); 
div.setAttribute("dir", "rtl"); 

• 适用场景
  • HTML属性
  • 自定义属性

区别	通过DOM对象设置属性	通过setAttritube()设置属性
	可以直接设置元素属性的值	添加自定义属性，不会变成元素属性，通过getAttribute()获取返回null

div.id = "someOtherId"; 
div.align = "left";

div.mycolor = "red"; 
alert(div.getAttribute("mycolor")); // null（IE 除外）

四 删除属性

• removeAttritube()：整个属性（包括属性的值）完全从元素中去掉

div.removeAttribute("class");

五 attibutes属性

• Element类型是唯一使用attribute属性的DOM节点类型
• attribute属性包含一个NameNodeMap实例，是一个类似NodeList的实时集合
• 元素的每个属性都表示一个Attr节点，并保存在这个NameNodeMap对象中

NameNodeMap对象的方法

• getNamedItem(name)
  • 返回：nodeName属性等于name的节点

let id = element.attributes.getNamedItem("id").nodeValue;

使用中括号访问属性的简写形式

• let id = element.attributes["id"].nodeValue

也可以用这种语法设置属性的值，即先取得属性节点，再将其 nodeValue 设置为新值

• element.attributes["id"].nodeValue = "someOtherId";

• removeNamedItem(name)
  • 删除nodeName属性等于name的节点

let oldAttr = element.attributes.removeNamedItem("id");

• setNamedItem(node)
  • 向列表中添加node节点，以其nodeName为索引

element.attributes.setNamedItem(newAttr); 

• item(pos)
  • 返回索引位置pos处的节点
• 迭代元素上所有属性

// 要把 DOM 结构序列化为 XML 或 HTML 字符串。比如，以下代码能够迭代一个元素上的所有属性并以attribute1= "value1" attribute2="value2"的形式生成格式化字符串

function outputAttributes(element) { 
 let pairs = []; 
 for (let i = 0, len = element.attributes.length; i < len; ++i) { 
 const attribute = element.attributes[i]; 
 pairs.push(`${attribute.nodeName}="${attribute.nodeValue}"`); 
 } 
 return pairs.join(" "); 
}

// 这个函数使用数组存储每个名/值对，迭代完所有属性后，再将这些名/值对用空格拼接在一起。（这个技术常用于序列化为长字符串。）这个函数中的 for 循环使用 attributes.length 属性迭代每个属性，将每个属性的名字和值输出为字符串。

六 创建元素：document.createElement()

• 参数：要创建元素的标签名
• 方法：
  • 添加属性
  • 添加到文档树

let div = document.createElement("div"); 
div.id = "myNewDiv"; 
div.className = "box";
document.body.appendChild(div); 

七 元素后代

childNodes属性包含元素所有的子节点

• 其他元素
• 文本节点
• 注释
• 处理指令

<ul id="myList"> 
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li> 
</ul>

// 在解析以上代码时，<ul>元素会包含 7 个子元素，其中 3 个是<li>元素，还有 4 个 Text 节点（表示<li>元素周围的空格）。

// 如果把元素之间的空格删掉，变成下面这样，则所有浏览器都会返回同样数量的子节点：
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul> 
// 所有浏览器解析上面的代码后，<ul>元素都会包含 3 个子节点。考虑到这种情况，通常在执行某个操作之后需要先检测一下节点的 nodeType，如下所示：

for (let i = 0, len = element.childNodes.length; i < len; ++i) { 
 if (element.childNodes[i].nodeType == 1) { 
 // 执行某个操作
 } 
} 
// 以上代码会遍历某个元素的子节点，并且只在 nodeType 等于 1（即 Element 节点）时执行某个操作。

//要取得某个元素的子节点和其他后代节点，可以使用元素的 getElementsByTagName()方法。在元素上调用这个方法与在文档上调用是一样的，只不过搜索范围限制在当前元素之内，即只会返回当前元素的后代。

// 对于本节前面<ul>的例子，可以像下面这样取得其所有的<li>元素：
let ul = document.getElementById("myList"); 
let items = ul.getElementsByTagName("li"); 
// 这里例子中的<ul>元素只有一级子节点，如果它包含更多层级，则所有层级中的<li>元素都会返回