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";