DOM文件,和表單操作

2021-09-25 21:04:37 字數 3348 閱讀 8898

建立節點和插入節點

間接查詢元素

替換節點

轉殖節點

刪除節點

獲取表單

獲取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...