Constant Value Description
Node.ELEMENT_NODE 1 An Element node such as
or
.
Node.TEXT_NODE 3 The actual Text of Element or Attr.
Node.PROCESSING_INSTRUCTION_NODE 7 A ProcessingInstruction of an XML document such as declaration.
Node.COMMENT_NODE 8 A Comment node.
Node.DOCUMENT_NODE 9 A Document node.
Node.DOCUMENT_TYPE_NODE 10 A DocumentType node e.g. for HTML5 documents.
Node.DOCUMENT_FRAGMENT_NODE 11 A DocumentFragment node.
var test = document.getElementById("aaa"); //假設我的aaa 是一個p元素
console.log(test.nodeType);
if(test.nodeType == 1){
console.log("Node is an element");
console.log(test.nodeName); //返回p
}
var test = document.getElementById("bbb");
console.log(test.childNodes.length);//返回9,因為把空格都當成了節點,所以并不準確
console.log(test.childNodes[0]);//返回一個#text對象,空白被當成了文本對象
console.log(test.childNodes[1]);//返回
var body = document.body; //取得body的引用
var title = document.title; //取得title的引用
console.log(document.URL); //取得完整的URL
console.log(document.domain); //取得域名
console.log(document.childNodes[0]);//對于document來說第一個元素就是html
var link = document.createElement("link");
link.rel - "stylesheet";
link.type = "text/css";
link.href = "style.css";
//因為只有一個head,所以用[0]數組第一個元素獲取head標簽
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
選擇符APIquerySelector()方法
返回第一個匹配的元素
//支持元素,id,類,跟css的選擇器和jq的選擇器很像
var body = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var selected = document.querySelector(".selected");
var img = document.body.querySelector("img.button");
querySelectorAll()
返回所有匹配的元素,是一個集合
var ems = document.getElementById("myDiv").querySelectorAll("em");
var i ,len = ems.length;
//需要循環遍歷來獲取每一個元素,也可以用item()方法
for(i=0;imatchSelector()
var div = document.getElementById("test1");
//將class組成一個數組
var classNames = div.className.split(/s+/);
var pos = -1, i;
var len = classNames.length;
for (i = 0; i < len; i++) {
//只要這個數組里面有要刪除的classs
if (classNames[i] == "class2") {
pos = i;
break;
}
}
//刪除class組成的數組的一個元素,這個元素就是剛才匹配我們要刪除的元素
classNames.splice(pos, 1);
//重新將數組組成一個字符串,賦值到html元素的的className
div.className = classNames.join(" ");
var div = document.getElementById("test1");
console.log(div.dataset.myname);//返回haha
div.dataset.myname = "lala";
console.log(div.dataset.myname); //修改為lala
專業擴展
//強制ie7模式
innerHTML
var div = document.getElementById("test1");
div.innerHTML = "
