DOM和表單操作

2021-09-23 22:41:54 字數 2352 閱讀 1702

dom:

建立節點和插入節點

建立節點

方法 描述

createelement() 建立乙個新的節點,需要傳入節點的標籤名稱,返回建立的元素物件

createtextnode() 建立乙個文字節點,可以傳入文字內容

innerhtml 也能達到建立節點的效果,直接新增到指定位置了

間接查詢節點

方法|屬性 描述

childnodes () 返回元素的乙個子節點的陣列

firstchild() 返回元素的第乙個子節點

lastchild() 返回元素的最後乙個子節點

nextsibling 返回元素的下乙個兄弟節點

parentnode 返回元素的父節點

previoussibling 返回元素的上乙個兄弟節點

替換節點

方法|屬性 描述

replacechild(newnode,oldnode) 用新的節點替換舊的節點

轉殖節點

方法|屬性 描述

clonenode() 複製節點

var 複製好的節點 = 被複製的節點.clonenode([true/false]);

true:深度轉殖,可以轉殖結構和內容 false(預設值):只轉殖結構

刪除節點

方法|屬性 描述

removechild() 從元素中移除子節點

屬性操作

方法|屬性 描述

getattribute() 返回指定元素的屬性值

getattributenode() 返回指定屬性節點

element.id 設定或者返回元素的

id setattribute() 設定或者改變指定屬性並指定值

setattributenode() 設定或者改變指定屬性節點

element.style 設定或返回元素的樣式屬性

element.classname 設定或返回元素的 class 屬性

element.classlist 返回元素的類名

獲取表單

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;

DOM文件,和表單操作

建立節點和插入節點 間接查詢元素 替換節點 轉殖節點 刪除節點 獲取表單 獲取input元素 獲取單選按鈕 獲取下拉選項 表單提交 文件節點 文件本身 整個文件 document 元素節點 所有的 html 元素 如 a div p 等 屬性節點 html 元素內的屬性 如 id href name...

Dom樹結構和dom操作

element 文件中的元素 attr parentnode.insertbefore a,b 在parentnode元素中的 b元素之前插入a元素 且b必須已經在dom結構中 插入a在b之前 返回得結構為靜態快照並不會隨之改變,其座標相對於視口 offsetwidth offsetheight 常...

jquery操作DOM和事件

1.jquery操作dom的屬性 attr 1.1 獲得節點的屬性 jquery物件.attr 屬性名 eg 獲得節點物件的屬性 alert d1 attr src 1.2 設定節點的一對屬性 jquery物件.attr 屬性名 屬性值 eg 設定節點物件的一對屬性 1.3 設定節點的多對屬性 jq...