建立節點和插入節點
間接查詢元素
替換節點
轉殖節點
刪除節點
獲取表單
獲取input元素
獲取單選按鈕
獲取下拉選項
表單提交
文件節點
文件本身 整個文件 document
元素節點
所有的 html 元素 如:< a >, < div >, < p > 等
屬性節點
html 元素內的屬性 如: id、href、name、class
文字節點
元素內的文字
注釋節點
html 中的注釋
方法:
getelementbyid() 根
getelementsbytagname()
getelementsbyclassname()
getelementsbyname()
注意:
注意:操作 dom 必須等節點初始化完畢後,才能執行。處理方式兩種:
(1)把 script 呼叫標籤移到 html 末尾即可;
(2)使用 onload 事件來處理 js,等待 html 載入完畢再載入 onload 事件裡的 js。
window.onload = function () ;
方法:
createelement()
建立乙個新的節點,需要傳入節點的標籤名稱,返回建立的元素物件
createtextnode()
建立乙個文字節點,可以傳入文字內容
innerhtml
也能達到建立節點的效果,直接新增到指定位置了
方法:
write()
將任意的字串插入到文件中
insertbefore()
向指定的已有的節點之前插入新的節點
newitem:要插入的節點
exsitingitem:參考節點 例:
間接查詢屬性
childnodes
返回元素的乙個子節點的陣列
firstchild
返回元素的第乙個子節點
lastchild
返回元素的最後乙個子節點
nextsibling
返回元素的下乙個兄弟節點
parentnode
返回元素的父節點
previoussibling
返回元素的上乙個兄弟節點
方法:replacechild(newnode,oldnode)
細節:oldnode.parentnode.replacechild(newnode,oldnode)
clonenode()
var 複製好的節點 = 被複製的節點.clonenode([true/false]);
true:深度轉殖,可以轉殖結構和內容
false(預設值):只轉殖結構
removechild() 從元素中移除子節點
細節:
p.parentnode.removechild( p )
獲取表單
前兩中常用
1、document.表單名稱
2、document.getelementbyid(表單 id);
3、document.forms[表單名稱]
4、document.forms[索引]; //從 0 開始
獲取 input 的元素
如 text password hidden textarea 等,前兩種常用。
1)、通過 id 獲取:document.getelementbyid(元素 id);
2)、通過 form.名稱形式獲取: myform.元素名稱; name 屬性值
3)、通過 name 獲取 :document.getelementsbyname(元素名稱)[索引] //從 0 開始
4)、通過 tagname 陣列 :document.getelementsbytagname(『input』)[索引] //從 0 開始
獲取 單選按鈕
前提:將一組單選按鈕設定相同的 name 屬性值
(1)獲取單選按鈕組:
document.getelementsbyname(「name 屬性值」);
(2)遍歷每個單選按鈕,並檢視單選按鈕元素的 checked 屬性
若屬性值為 true 表示被選中,否則未被選中
選中狀態設定: checked=』checked』 或 checked=』true』 或 checked
未選中狀態設定: 沒有 checked 屬性 或 checked=』false』
獲取下拉選項
(1)獲取 select 物件:
var ufrom = document.getelementbyid(「ufrom」);
(2)獲取選中項的索引:
var idx=ufrom.selectedindex ;
(3)獲取選中項 options 的 value 屬性值:
var val = ufrom.options[idx].value;
注意:當通過 options 獲取選中項的 value 屬性值時,
若沒有 value 屬性,則取 option 標籤的內容
若存在 value 屬性,則取 value 屬性的值
(4)獲取選中項 options 的 text:
var txt = ufrom.options[idx].text;
選中狀態設定:selected=『selected』、selected=true、selected
未選中狀態設定:不設 selected 屬性
提交表單
(1)使用普通 button 按鈕+onclick 事件+事件中編寫**: 獲取表單.submit();
(2)使用 submit 按鈕 + οnclick=「return 函式()」 +函式編寫**: 最後必須返回:return true|false;
(3)使用 submit 按鈕/提交按鈕 + 表單 οnsubmit=「return 函式();」 +函式編寫**: 最後必須返回:return true|false;
DOM和表單操作
dom 建立節點和插入節點 建立節點 方法 描述 createelement 建立乙個新的節點,需要傳入節點的標籤名稱,返回建立的元素物件 createtextnode 建立乙個文字節點,可以傳入文字內容 innerhtml 也能達到建立節點的效果,直接新增到指定位置了 間接查詢節點 方法 屬性 描...
操作DOM文件
html dom載入過程及其處理 解析html結構 載入外部指令碼和樣式表檔案 解析並執行指令碼 構造html dom模型 載入等外部檔案 頁面載入完畢 一般可執行指令碼都放在頁面初始化事件處理函式中,這樣能保證文件完全載入完畢後才執行指令碼,即第六步時才執行指令碼 window.onload fu...
dom操作之文件碎片
在日常的工作中,避免不了我們要想乙個元素中插入大量的動態元素,比如 在頁面中有乙個ul,我們隨著頁面的某乙個事件的觸發,需要向 box中插入大量的li,正常的寫法為 var oul document.queryselectorall box 0 for var i 0 i 1000 i var fr...