DOM对象 控制HTML元素 节点属性

开发工具与关键技术：visual Studio jquery
作者：邓伟征
撰写时间：2019年5月14日

getAttribute()方法 通过元素节点的属性名称获取属性的值。
/*
语法：elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字*/
var list = document.getElementsByTagName(“li”);
for (var i = 0; i < list.length; i++) {
var text = list[i].getAttribute(“title”);
if (text!=null) {
document.write(text+"
");

课程列表

• Safari
• CSS
• gsgfa
• RQRA
• GAGF
• Html5

以下为获取的不为空的li标签title值:

setAttribute()方法
/* setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
/
for (var i = 0; i < list.length; i++) {
list[i].setAttribute(“name”,“lis”);//浏览器看结果
}
节点属性
/
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型

    一、nodeName 属性: 节点的名称，是只读的。
    1. 元素节点的 nodeName 与标签名相同
    2. 属性节点的 nodeName 是属性的名称
    3. 文本节点的 nodeName 永远是 #text
    4. 文档节点的 nodeName 永远是 #document

    二、nodeValue 属性：节点的值
    1. 元素节点的 nodeValue 是 undefined 或 null
    2. 文本节点的 nodeValue 是文本自身
    3. 属性节点的 nodeValue 是属性的值

    三、nodeType 属性: 节点的类型，是只读的。以下常用的几种节点类型:
    元素类型    节点类型
      元素          1
      属性          2
      文本          3
      注释          8
      文档          9*/
    var lists = document.getElementsByTagName("li");
    for (var i = 0; i < lists.length; i++) {
        document.write(lists[i].nodeName + "<br/>");
        document.write(lists[i].nodeValue + "<br/>");
        document.write(lists[i].nodeType + "<br/>");
    }

//访问子节点childNodes
/访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。/
var x = document.getelementsbytagname(“ul”)[0].childnodes;
document.write(“ul子节点个数：” + x.length + “
”);
document.write(“节点类型：” + x[0].nodetype + “
”);
/*运行结果:
IE:（IE8.0及其以下版本的浏览器会忽略节点间的空白节点（空格、回车和Tab键），遵循W3C规范的浏览器（Chrome、FireFox、Safari等）则会把这些空白作为文本节点处理。）
UL子节点个数:5
节点类型:1
其它浏览器:
UL子节点个数:11
节点类型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7

• 空白节点
  
• html
• 空白节点
  
• css
• 空白节点
  
• javascript
• 空白节点
  
• jquery
• 空白节点
  
• html5
• 空白节点
  

如果把代码改成这样:

• HTML
• CSS
• JavaScript
• Jquery
• Html5

运行结果:（IE和其它浏览器结果是一样的）

访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

    var uls = document.getelementsbytagname("ul")[0];
    console.log(uls);
    console.log(uls.firstchild);
    console.log(uls.lastchild);