JS HTML DOM

Js可以建立動態的HTML

1:能夠改變頁面中的所有 HTML 元素

2:能夠改變頁面中的所有 HTML 屬性

3:能夠對頁面中的所有事件做出反應

一：使用JacaScript可以操作HTML元素，但是要做到這個事情需要先找到該元素，有3種方法：

1：使用ID找到HTML元素 document.getElementById(ID)//獲得指定ID值的物件

例子：

<!DOCTYPE html>

<html>

<body>

<p id=”a”>Hello World!</p>

x=document.getElementById("a");

document.write(x.innerHTML);

</script>

</body>

</html>

2：使用標籤嗎找到HTML元素 document.createElement(Tag) //建立一個html標籤物件

例子：

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<p>The DOM is very useful.</p>

<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

</div>

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

document.write('id 為 "main" 的 div 中的第一段文字是：' + y[0].innerHTML);

</script>

</body>

</html>

3：透過類名查詢HTML元素 document.getElementsByName(Name)//獲得指定Name值的物件

二 document.write()

注意：內容的語法是innerHTML

不要使用在文件載入之後使用 document.write()。這會覆蓋該文件

例如document.write() 可以改變HTML內容

<p id=”a”>aaaaa</p>

document.getElementByid(“a”).innerHTML=”bbbbb”

上面P標籤的內容會變成bbbbb

三 HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。

改變樣式的語法

dcunmen.getElemenByID(ID).style.property=new style

例子

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello World!</p>

<p id="p2">Hello World!</p>

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

</script>

<p>上面的段落已被一段指令碼修改。</p>

</body>

</html>

四：節點的新增和刪除

新增節點

<p id=”p1”>這是第一句話</p>

<p id=”p2”>這是第二句話</p>

</div>

Var para=document.createElement(“p”); //建立一個新元素

Var node=document.createTextNode(“這是新的一句話”)；//如需向 <p> 元素新增文字，您必須首先建立文字節點。這段程式碼建立了一個文字節點：

Para.appendChild(node); //在p元素後面追加上面的文字節點；

Var element=document.getElmentById(“div1”); //找到這個元素

Element.appendChild(“para”); //向上面的元素追加新元素，也就是p元素

</script>

刪除節點

想要刪除HTML元素必須獲得該元素的父元素

<p id=”p1”>這是第一句話</p>

<p id=”p2”>這是第二句話</p>

</div>

上面的例子中 div元素中有2個p元素，div是p元素的父元素

所以：

先找父元素var fu=document.getElementById(“div1”);

在找子元素 var zi=document.getElementById(“p1”);

從父元素中刪除子元素 fu.removeChild(child);

還一種方法是使用parentNode的屬性來找到父元素進行刪除

找到子元素 var zi=document.getElementById(“p1”);

然後刪除 child.parentNode.removeChild(zi);

JS中的DOM

相關文章