實現HTML頁面動態處理
阿新 • • 發佈：2019-01-06
- HTML DOM 可以可以對HTML中的元素進行刪除,增加的操作,要操作HTML DOM可以使用JavaScript的語言對HTML DOM進行訪問.
- 原html檔案
<html>
<head>
<title>歡迎頁面!</title>
<meta charset="utf-8"/>
</head>
<body>
<span>Hello World!</span>
<span>Hello World!</span>
< - 使用getElementsByTagName()方法取得所有span元素,
<script type="text/javascript">
window.onload = function ( - 動態設定元素樣式,假設有如下樣式,將偶數位的span元素設定為init0樣式,將奇數位的span設定為init1的樣式
<style type="text/css">
.init0{
color:green;
font-size:20px;
display:block;
}
.init1{
color:red;
font-size:20px;
display:block;
}
</style>
- 迴圈得到的span節點集合,設定每個節點的class屬性
<script type="text/javascript">
window.onload = function(){
//取得"span元素
var spanELes = document.getElementsByTagName("span");
for(var x = 0; x < spanELes.length; x ++){
spanELes[x].setAttribute("class","init"+(x%2));
}
}
</script>
- 頁面執行效果
刪除元素
- 再刪除元素的時候需要注意的是,如果使用getELementsByTagName()方法得到一個節點的集合,如果使用removeChild()方法刪除集合中的一個元素,則這個集合的長度會發生改變.
- 假設現在的html中的內容變為如下, 如果此時要刪除所有帶有"del"內容的span元素
<html>
<head>
<title>歡迎頁面!</title>
<meta charset="utf-8"/>
</head>
<body>
<span>Hello World! del</span>
<span>Hello World! del</span>
<span>Hello World!</span>
<span>Hello World!</span>
<span>Hello World del !</span>
<span>Hello World!</span>
<span>Hello del World!</span>
<span>Hello World!</span>
<span>Hello World!</span>
<span>Hello World!</span>
<span>Hello del World!</span>
<span>Hello World!</span>
<div>
<span id="10">Hello World!</span>
</div>
</body>
</html>
- 先使用getElementsByTagName()取得每一個span屬性
- 然後使用firstChild.nodeValue得到每一個span節點的內容
- 然後將帶有"del" 內容的節點儲存到一個數組中.
- 再使用parentNode得到要刪除節點的父節點
- 再使用removeChild()刪除所有子節點
<script type="text/javascript">
window.onload = function(){
//取得"span元素
var spanEles = document.getElementsByTagName("span");
//得到原集合的長度
var len = spanEles.length;
//儲存要刪除的子節點陣列
var delList = new Array();
//運算元組的下標
var foot = 0;
for(var x = 0; x < spanEles.length; x ++){
spanEles[x].setAttribute("class","init1");
//得到每個節點的內容
var strValue = spanEles[x].firstChild.nodeValue;
//判斷是是否有"del"字元的節點
if(strValue.indexOf("del")!=-1){
//將每一個要刪除的內容儲存到陣列中
delList[foot ++] = spanEles[x];
}
}
//迴圈刪除陣列中的每一個節點
for(var j = 0; j < delList.length; j++){
//得到當前節點的父節點,然後刪除父節點的子元素
delList[j].parentNode.removeChild(delList[j]);
}
}
</script>
- 執行結果
取得屬性內容
- 假設現在的html檔案內容為,如果要取得id為:"10"的span元素中的屬性內容
<html>
<head>
<title>歡迎頁面!</title>
<meta charset="utf-8"/>
</head>
<body>
<div><span id="10 class="init0" >Hello World!</span></div>
</body>
</html>
- 可以使用document.getElementById()方法取得一個指定id的元素-,正常情況下可以直接使用"元素.屬性"取得元素內容
window.onload = function(){
//取得span屬性
var spanEle = document.getElementById("10");
//向控制檯輸出,屬性內容
console.log("id = "+spanEle.id);
console.log("class = "+spanEle.className);
}
- 控制檯輸出
- 如果直接使用"元素.屬性" 的方式取得屬性內容,表示這個屬性已經被定義過了,而一些我們自定義的屬性,是無法使用這樣的方式取得屬性內容的,但是也可以通過以下的方法取得屬性內容
Element.getAttribute("屬性名稱");
- 例如html中定義有如下的內容
<div><span id="10" class="init0" obj="spanObj" >Hello World!</span></div>
- 如果要取得span元素中的obj屬性內容,可以通過以下方式
<script type="text/javascript">
window.onload = function(){
//取得span屬性
var spanEle = document.getElementById("10");
//向控制檯輸出,屬性內容
console.log("obj = "+ spanEle.getAttribute("obj"));
}
</script>
- 使用DOM控制元素的屬性,更加的靈活