什么是DOM？

DOM (Document Object Model) 譯為文檔對(duì)象模型，是 HTML 和 XML 文檔的編程接口。
HTML DOM 定義了訪問和操作 HTML 文檔的標(biāo)準(zhǔn)方法。
DOM 以樹結(jié)構(gòu)表達(dá) HTML 文檔。

HTML DOM 定義了所有 HTML 元素的對(duì)象和屬性，以及訪問它們的方法。

換言之，HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。

根據(jù)HTML DOM標(biāo)準(zhǔn)，HTML中所有內(nèi)容都是節(jié)點(diǎn)。

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 元素是元素節(jié)點(diǎn)
HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
每個(gè) HTML 屬性是屬性節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)

HTML DOM的一些方法

getElementById(id) - 獲取帶有指定 id 的節(jié)點(diǎn)（元素）appendChild(node) - 插入新的子節(jié)點(diǎn)（元素）removeChild(node) - 刪除子節(jié)點(diǎn)（元素）

HTML DOM的一些屬性

innerHTML - 節(jié)點(diǎn)（元素）的文本值parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)childNodes - 節(jié)點(diǎn)（元素）的子節(jié)點(diǎn)attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)

應(yīng)用：動(dòng)態(tài)添加城市

需求：當(dāng)我們?cè)L問網(wǎng)頁(yè)時(shí)，添加網(wǎng)頁(yè)上所沒有的地址

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title 動(dòng)態(tài)添加城市 /title  script  function add_city() { // 1. 獲取輸入框值 var cityEle= document.getElementById( city ).value; // 2. 創(chuàng)建城市的文本節(jié)點(diǎn) var citynode = document.createTextNode(cityEle); // 3. 創(chuàng)建li的元素節(jié)點(diǎn) var linode = document.createElement( li  // 4. 把城市的文本節(jié)點(diǎn)，添加到li元素節(jié)點(diǎn)中 linode.appendChild(citynode); // 5. 獲取順序列表ol標(biāo)簽的值 var ulEle = document.getElementById( city_line  // 6. 將li元素節(jié)點(diǎn)添加到ol標(biāo)簽里 ulEle.appendChild(linode); /script  /head  body  input type= text id= city placeholder= 城市  // 確定事件類型 onclick  input type= submit value= 添加 quot;add_city()  ol id= city_line  li 西安 /li  li 拉薩 /li  li 成都 /li  /ol  /body  /html 

應(yīng)用：城市的二級(jí)聯(lián)動(dòng)

所謂二級(jí)聯(lián)動(dòng)，就是要通過一個(gè)下拉列表的選擇從而在另一個(gè)select下拉列表中顯示出對(duì)應(yīng)的數(shù)據(jù)。好比我有兩個(gè)下拉列表，第一列表是選擇省份，那么我選擇某一個(gè)省份，那么另一個(gè)列表也會(huì)對(duì)應(yīng)顯示該省份的城市。

 !DOCTYPE html  html  head  meta charset= UTF-8  title 二級(jí)聯(lián)動(dòng)（城市） /title  style  div{ margin: 0 auto; text-align: center; margin-top: 100px; /style  SCRIPT  function choice_city() { // 2.1 獲取用戶選擇的省份 var province_Ele = document.getElementById( province ).value; // 2.2 創(chuàng)建一個(gè)二維數(shù)組，用來存放省份和城市的對(duì)應(yīng)關(guān)系 var cities = new Array(3); cities[0] = new Array( 西安 , 咸陽(yáng) , 寶雞  cities[1] = new Array( 成都 , 綿陽(yáng) , 遂寧  cities[2] = new Array( 濟(jì)南 , 青島 , 臨沂  // 3 獲取用戶選擇的城市 var seleceEle = document.getElementById( city  // 4 清空第二個(gè)下拉列表的內(nèi)容 seleceEle.options.length = 1 ; // 2.3 遍歷二維數(shù)組，比較省份編號(hào)和用戶選擇的省份 for(var i = 0;i cities.length;i++){ // 2.4 如果選擇省份編號(hào)為i,遍歷城市 if (province_Ele == i){ for(var j = 0;j cities[i].length;j++){ // 2.5 創(chuàng)建城市的文本節(jié)點(diǎn) var citynode = document.createTextNode(cities[i][j]); // 2.6 創(chuàng)建option的屬性節(jié)點(diǎn) var optionnode = document.createElement( option  // 2.7 將城市文本添加到option屬性節(jié)點(diǎn) optionnode.appendChild(citynode); // 2.8 將option內(nèi)容添加到select元素里面 seleceEle.appendChild(optionnode) /SCRIPT  /head  body  form  div  span 籍貫 /span  // 1. 確定事件類型onchange, 并為其綁定一個(gè)函數(shù) select id= province onchange= choice_city()  option --省份-- /option  option value= 0 陜西省 /option  option value= 1 四川省 /option  option value= 2 山東省 /option  /select  select id= city  option --市區(qū)-- /option  /select  /div  /form  /body  /html 

以上就是HTML DOM是什么？HTML DOM的應(yīng)用講解的詳細(xì)內(nèi)容，其它編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。