DOM
DOM中的三個字母,D(文檔)可以理解爲整個Web加載的網頁文檔;O(對象)可以理解爲類似window對象之類的東西,可以調用屬性和方法,這裏我們說的是document對象;M(模型)可以理解爲網頁文檔的樹型結構
節點
節點種類
查找元素
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="color:black" id="box" title="mytitle" class="class" bbb="bbb_value">
hello
</div>
<input id="input" type="text" value="123"/>
<input id="input1" type="radio" checked/>
</body>
<script type="text/javascript">
document.getElementById('box').id;//獲取id
//document.getElementById('box').id = 'person';//設置id
document.getElementById('box').title;//獲取title
document.getElementById('box').title = 'new_title';//設置title
document.getElementById('box').style;//獲取CSSStyleDeclaration對象
document.getElementById('box').style.color;//獲取style對象中color的值
document.getElementById('box').style.color = 'red';//設置style對象中color的值
document.getElementById('box').className;//獲取class
document.getElementById('box').className = 'box';//設置class
document.getElementById('box').getAttribute('className');//非IE不支持
console.log(document.getElementById('box').bbb);//獲取自定義屬性的值,非IE不支持
document.getElementById('box').setAttribute("bbb","new_bbb_value");
console.log(document.getElementById('box').getAttribute("bbb"));//new__bbb_value
document.getElementById('box').removeAttribute("bbb");//刪除屬性
console.log(document.getElementById('box').getAttribute("bbb"));//null
console.log(document.getElementById('input').value);//1234
console.log(document.getElementById('input1').checked);//true
</script>
</html>
DOM節點
node節點屬性
<script type="text/javascript">
console.log(document.getElementById('box').nodeType);//1,元素節點
console.log(document.getElementById('box').nodeName);//Div
console.log(document.getElementById('box').getAttribute("style").nodeValue);//undefined,getAttribute獲取的是值,不是屬性節點
console.log(document.getElementById('box').attributes.item(0).nodeValue);//color:black
</script>
層次節點屬性
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="color:black" id="box" title="mytitle" class="class" bbb="bbb_value">
<span>hello1</span>
<span>hello2</span>
<span>hello3</span>
</div>
</body>
<script type="text/javascript">
var div = document.getElementById('box')
console.log(div.innerHTML);
/*
<span>hello1</span>
<span>hello2</span>
<span>hello3</span>
*/
console.log(div.childNodes.length);//得到子節點個數,IE3個,非IE7個,換行會產生空白節點
console.log(div.childNodes[0].nodeValue);//輸出空白
console.log(div.attributes['bbb'].nodeValue);//bbb_value
console.log(div.attributes.getNamedItem('bbb').nodeValue);//和上面效果一樣
console.log(div.firstChild.nodeValue);//輸出空白
console.log(div.firstChild.innerHTML);//undefined
console.log(div.lastChild.nodeValue);//輸出空白
console.log(div.ownerDocument);//#document
console.log(div.childNodes[0].nextSibling.innerHTML);//hello1
console.log(div.childNodes[2].previousSibling.innerHTML);//hello2
console.log(div.parentNode);//body對象
</script>
</html>
節點操作
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">
document.write("<div id='box'></div>");
var span = document.createElement("span");
var text = document.createTextNode("hello");
span.appendChild(text);
document.getElementById("box").appendChild(span);
var h = document.createElement("h1");
var text1 = document.createTextNode("h1");
h.appendChild(text1);
document.getElementById("box").insertBefore(h,span);
var input = null;
input = document.createElement('input');
input.setAttribute('type', 'radio');
input.setAttribute('name', 'sex');
document.getElementById("box").appendChild(input);
//替換節點
var text2 = document.createTextNode("new_hello");
span.replaceChild(text2,span.childNodes[0]);
//克隆節點
var span1 = span.cloneNode(true);//true會複製內容,否則只複製結構
span1.id = "span1";
document.getElementById("box").appendChild(span1);
//刪除節點
document.getElementById("box").removeChild(document.getElementById("span1"));
</script>
</html>