文章目錄
JavaScript Dom操作
基礎頁面
<body>
<div class="main">
<h2>前端語言</h2>
<ul id="List1">
<li id="li1">HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>後端語言</h2>
<ul id="list2">
<li title="C語言">C</li>
<li title="Java語言">Java</li>
<li title="我是Python">Python</li>
<li title="C Sharp">C#</li>
</ul>
</div>
</body>
運行結果
通過ID獲取元素
<script>
var c1 = document.getElementById("list1");
var c2 = document.getElementById("li1")
document.write("通過ID獲取 ul 標籤" + c1 + '<br>');
document.write("通過ID獲取 li 標籤" + c2);
</script>
顯示結果：
innerHTML用於獲取或修改p標籤內容
<script>
var c1 = document.getElementById("ppp")
document.write(c1.innerHTML + '<br>')
c1.innerHTML = '我是修改後的p標籤';
document.write(c1.innerHTML + '<br>')
</script>
顯示結果：
改變HTML樣式
基本語法格式：Object.style.property=str;
<script>
var c1 = document.getElementById("ppp")
c1.style.color = 'red'
c1.style.fontSize = '30px'
c1.style.fontFamily = '隸書'
c1.style.backgroundColor = '#cccccc'
</script>
顯示效果：
改變類選擇器
格式object.className = classname
var c1 = document.getElementById("ppp")
c1.className = 'test'
顯示結果：
通過name屬性獲取元素
格式document.getElementsByName(str);
var c1 = document.getElementsByName('myname');
document.write(c1 + '<br>');
document.write('數組的長度爲' + c1.length);
顯示結果：
通過標籤名字獲取標籤
格式：document.getElementsByTagName(str);
var c1 = document.getElementsByTagName("li");
document.write('li 標籤的數量爲：' + c1.length);
顯示結果：
ID是唯一的。
Name可以重複。
TagName是某一標籤類的集合。
獲取屬性值
格式：elementNode.getAttribute(name)
var c1 = document.getElementsByTagName("li");
document.write('li 標籤的數量爲：' + c1.length);
for (var i = 0; i < c1.length; i++) {
text = c1[i].getAttribute('title');
if (text != null) {
document.write('<br>' + text)
}
}
設置新屬性
elementNode.setAttribute(name,value)
var c1 = document.getElementsByTagName("li");
document.write('li 標籤的數量爲：' + c1.length);
for (var i = 0; i < c1.length; i++) {
text = c1[i].getAttribute('title');
if (text == "C Sharp") {
c1[i].setAttribute('title', 'C#')
text = c1[i].getAttribute('title')
}
if (text != null) {
document.write('<br>' + text)
}
}
節點對象屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：
-
nodeName : 節點的名稱
-
nodeValue ：節點的值
-
nodeType ：節點的類型
var c1 = document.getElementsByTagName("li");
for (var i = 0; i < c1.length; i++) {
document.write("<br>節點" + i + "的名稱:" + c1[i].nodeName)
document.write("<br>節點" + i + "的類型:" + c1[i].nodeType)
document.write("<br>節點" + i + "的值:" + c1[i].nodeValue)
}
訪問子節點
elementNode.childNodes用於訪問子節點
node.firstChild用於訪問第一個子節點
node.lastChild用於訪問最後一個子節點
訪問父節點
elementNode.parentNode用於訪問父節點
elementNode.parentNode.parentNode用於訪問祖節點
訪問兄弟節點
-
nextSibling 屬性可返回某個節點之後緊跟的節點（處於同一樹層級中）。
nodeObject.nextSibling -
previousSibling 屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。
nodeObject.previousSibling
如果無兄弟節點，則該屬性返回 null。
插入節點
appendChild(newnode)
var c1 = document.getElementById('List1')
var newNode = document.createElement('li')
newNode.innerHTML = 'jQuery'
c1.appendChild(newNode)
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
insertBefore(newnode,node);
var c1 = document.getElementById('List1')
var newNode = document.createElement('li')
var lNode = document.getElementById('List1').firstChild
newNode.innerHTML = 'jQuery'
c1.insertBefore(newNode, lNode)
刪除節點
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
nodeObject.removeChild(node)
node ：必需，指定需要刪除的節點。
替換元素節點
replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。
node.replaceChild (newnode,oldnew )
newnode : 必需，用於替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
創建元素節點
createElement()方法可創建元素節點。此方法可返回一個 Element 對象。
document.createElement(tagName)
tagName：字符串值，這個字符串用來指明創建元素的類型。
要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。
創建文本節點
createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。
document.createTextNode(data)
data : 字符串值，可規定此節點的文本。