DOM启蒙——第三章

1.HTML文档中每个元素都有个独一无二的javascript构造函数使这些元素实例化为DOM树中的节点对象。

(document.createTextNode(document.querySelector("a").constructor));  //function HTMLAnchorElement(){ [native code] }

2.HTML Element对象属性与方法

var anchor=document.querySelector("a"), inhePro=[];

for(var p in anchor){

   inhePro.push(p);

}//自有与继承属性。

3.创建元素

可以使用createElement()方法创建Element节点。

var elementNode=document.createElement("textarea");

document.body.appendChild(elementNode);

console.log(document.querySelector("textarea")); //<textarea></textarea>

传给createElement()方法的值是一个字符串，指明要创建的元素类型(tagName)

4.获取标签名

使用tagName属性可以获得元素的名称，tagName属性返回的值与nodeName返回的相同。两者返回的都是大写。

(document.createTextNode(document.querySelector("a").tagName)); //A

5.获取元素属性与值的列表/集合。

使用attributes属性可以取得一个由当前元素定义的Attr节点组成的集合。该列表返回一个NamedNodeMap。

var attrs=document.querySelector("a").attributes;

attributes是一个类数组的集合，有只读的length属性。

6.获取、设置、移除元素属性值

最一致的获取、设置以及移除元素的属性值的方式是使用getAttribute()、setAttribute()、removeAttribute()方法

var A=document.querySelector("a");

● (document.createTextNode(A.getAttribute("style")));

● (document.createTextNode(document.querySelector("textarea").setAttribute("hidden","true")));

● (document.createTextNode(A.removeAttribute("title")));

应使用removeAttribute()而不是setAttribute()将属性设为null或者""；

7.验证是否含有属性

使用hasAttribute()判断一个元素是否有某个属性。

(document.createTextNode(A.hasAttribute("style")));

如果元素包含该属性就会返回true,即使该属性没有值。

8.获取类属性值列表

使用元素节点的classList属性可以获取一个class属性值列表。

var elm=document.querySelector("div");

● console.log(elm.classList);            //返回DOMTokenList

● console.log(elm.className);        //返回以空格分隔的class列表

9.添加与移除class属性中的部分值

使用classList.add()和classList.remove()方法可以修改class属性的值。

elm.classList.add("add");

elm.classList.remove("c");

10.变换某个class属性值

使用classList.toggle()方法可以变换类属性中某部分值。可以在某个值缺少时添加，或者在它已添加时移除。

elm.classList.toggle("visible");

11.判断class属性是否含有某一特定值。

(document.createTextNode(elm.classList.contains("e")));

12.获取与设置data-*属性

元素节点的dataset属性提供了一个对象，包含该元素所有以data-*起始的属性。

var A=document.querySelector("a");

var elm=document.querySelector("div");

●获取  A.dataset.foo;

●设置    elm.dataset.goo="newGoo";