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

你可能感兴趣的:(DOM启蒙——第三章)