首頁 > 開發者 > JavaScript
標籤：play 頁面 方法 content 編程 fixed dex _id dom
HTML DOM （文件物件模型）
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
HTML DOM 模型被構造為對象的樹。
一：HTML DOM 樹通過可程式化的物件模型，JavaScript 獲得了足夠的能力來建立動態 HTML。
通常，通過 JavaScript，您需要操作 HTML 元素。
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：
1）找到標籤
擷取單個元素 document.getElementById(‘i1‘)
擷取多個元素（列表）document.getElementsByTagName(‘div‘)
擷取多個元素（列表）document.getElementsByClassName(‘c1‘)
a. 直接找
document.getElementById 根據ID擷取一個標籤
document.getElementsByName 根據name屬性擷取標籤集合
document.getElementsByClassName 根據class屬性擷取標籤集合
document.getElementsByTagName 根據標籤名擷取標籤集合
2)間接
tag=document.getElementById("l1")
parentElement //父節點標籤元素
children //所有子節點標籤
firstElementChild //第一個子標籤元素
lastElementChild //最後一個子標籤元素
nextElementSibling //下一個兄弟標籤元素
previousElementSibling //上一個兄弟標籤元素
三：標籤操作 1）innerText
擷取標籤中的常值內容
標籤.innerText
對標籤內容文本進行修改
標籤.innerText="內容"
2）className
tag.className =>直接整體做操作,擷取所有類裡內容，字串
tag.classList 擷取所有類裡內容，返回列表
tag.classList.add("樣式名") 添加指定樣式
tag.classList.remove("樣式名") 刪除指定樣式
3)checkbox 擷取值
checkbox對象.checked
設定值
checkbox對象.checked = true
PS:
<div onclick=‘func();‘>點我</div>
<script>
function func(){
}
</script>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; //不顯示 } .c1{ position: fixed; //固定全屏覆蓋 top: 0; right: 0; bottom: 0; left: 0; background-color: black; opacity: 0.6; //透明度 z-index: 9; //權重 } .c2{ position: fixed; //固定劇中 left: 50%; top: 50%; width: 400px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: white; z-index: 10; } </style></head><body><div> <p> <input type="button" value="添加" onclick="show()"/> <table style="border-color: chocolate;border: 3px;"> <thead> <tr> <th>主機</th> <th>連接埠</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>191</td> </tr> <tr> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td>1.1.1.1</td> <td>192</td> </tr> </tbody> </table> </p></div><!-- 遮罩層開始--><div id="c1" class="c1 hide"></div><!-- 遮罩層結束--><!-- 對話方塊開始--><div id="c2" class="c2 hide"> <label for="name">使用者名稱</label> <input id="name" type="text" name="name"> <br/> <label for="password">密碼</label> <input id="password" type="password" name="name"> <br> <input type="reset" value="取消" onclick="showCancel()"> <input type="reset" value="添加"></div><!-- 對話方塊結束--> <script> function show(){ document.getElementById("c1").classList.remove("hide") document.getElementById("c2").classList.remove("hide") } function showCancel(){ document.getElementById("c1").classList.add("hide") document.getElementById("c2").classList.add("hide") } </script></body></html> 2)樣本之表格全選取消反選
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style></head><body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全選" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反選" onclick="ReverseAll();" /> <table> <thead> <tr> <th>選擇</th> <th>主機名稱</th> <th>連接埠</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩層開始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩層結束 --> <!-- 彈出框開始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="確定"/> </p> </div> <!-- 彈出框結束 --> <script> function ShowModel(){ document.getElementById(‘i1‘).classList.remove(‘hide‘); document.getElementById(‘i2‘).classList.remove(‘hide‘); } function HideModel(){ document.getElementById(‘i1‘).classList.add(‘hide‘); document.getElementById(‘i2‘).classList.add(‘hide‘); } function ChooseAll(){ var tbody = document.getElementById(‘tb‘); // 擷取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 迴圈所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody = document.getElementById(‘tb‘); // 擷取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 迴圈所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById(‘tb‘); // 擷取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 迴圈所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script></body></html> 3）樣本之-左側菜單
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item{ width: 48px; } .header{ background-color: #ff18a4; text-align: center; } .content{ text-align: center; } </style></head><body> <div class="menu"> <div class="item"> <div id="header1" class="header" onclick="showMenu(‘header1‘);">菜單1</div> <div class="contents hide"> <div class="content">內容1</div> <div class="content">內容2</div> <div class="content">內容3</div> </div> </div> <div class="item"> <div id="header2" class="header" onclick="showMenu(‘header2‘);">菜單2</div> <div class="contents hide"> <div class="content">內容1</div> <div class="content">內容2</div> <div class="content">內容3</div> </div> </div> <div class="item"> <div id="header3" class="header" onclick="showMenu(‘header3‘);">菜單3</div> <div class="contents hide"> <div class="content">內容1</div> <div class="content">內容2</div> <div class="content">內容3</div> </div> </div> <div class="item"> <div id="header4" class="header" onclick="showMenu(‘header4‘);">菜單4</div> <div class="contents hide"> <div class="content">內容1</div> <div class="content">內容2</div> <div class="content">內容3</div> </div> </div> </div> <script> function showMenu(headern){ //傳遞ID參數 var header_id=document.getElementById(headern) //擷取header元素 var menu=header_id.parentElement.parentElement //擷取父級的父級的元素menu var menu_item=menu.children //擷取menu下面的所有子項目 for(var i=0 ;i<menu_item.length;i++){ menu_item[i].children[1].classList.add("hide") //擷取contents元素，並增加hide類 } header_id.nextElementSibling.classList.remove("hide") //去除header元素兄弟，刪除hide類 } </script></body></html>
javascript-dom文件物件模型1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
