DOM03-节点层次-Element类型

除Document类型之外,Element类型就要算是Web编程中最常用的类型了.

Element类型用于表现XML或HTML元素,提供了对元素标签名,子节点及特性的访问.具有以下特征

• nodeType的值为1;
• nodeName的值为元素的标签名;
• nodeValue的值为null;
• parentNode可能是Document或Element;
• 其子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection或EntityReference

1.访问元素

html代码

<div id="myDiv" class="bbb" title="wsl" style="color: pink;" onclick="click()">汪苏泷</div>

要访问元素标签名,可以使用nodeName属性,也可以使用tagName

 //取标签
    var div = document.getElementById("myDiv");
    console.log(div.tagName);
    console.log(div.nodeName);

输出结果:

2.HTML元素

每个HTML元素中都存在以下标准特性

1. id
2. title
3. lang
4. dir 语言的方向 值为"ltr"(left to right 从左到右) 其他:“rtl” (right to left 从右到左)
5. className 与元素class特性对应 即为元素指定的CSS类

 //1.HTML元素
    console.log(div.id+" "+div.className+" "+div.title);

输出结果

3.取得特性

console.log(div.getAttribute("id"));
console.log(div.getAttribute("class"));

输出结果

特殊情况

//特殊:style 和 onclick 特性访问的方式和属性访问的方式不同
    //style getAttribute返回css样式代码 属性访问返回对象
    console.log(div.getAttribute("style"));
    console.log(div.style);
    //onclick getAttribute返回相应代码串的字符串 属性访问则会返回JavaScript函数
    
    function click(){
        alert("点击");
    }
    
    console.log(div.onclick);
    console.log(div.getAttribute("onclick"));

输出结果

4.设置特性

div.setAttribute('id','myDiv2');
console.log(div.getAttribute('id'));

输出结果