一. html dom常用物件
: ——沒有
jquery
，沒有框架時的
過渡1. html dom對
個別常用的比較複雜的物件提供了簡化寫法
2.的簡化:
(1). 唯一的簡化: 建立img
a. 舊
dom: var img=document.createelement("img");
b. html dom: var img=new image();
(2). 強調: 只有兩個元素可以
new，其餘元素都不能用
new輕易建立
a. new image()
b. var option=new option()
3. 元素:
(1). options屬性: 可直接獲得
select
下所有直接子元素
option
的集合(2). 建立
時: var option=new option()
4. 元素
: 逐級管理
: (1). table物件管著行分組
物件a. table物件可以
新增行分組
物件1). 舊
dom: 2步
：i. var tbody=document.ceateelement("tbody") //建立行分組物件
2). html dom:
var tbody=table.createtbody()
強調: 一句話辦兩件事
: 既建立行分組物件，又將行分組新增到
table
中3). 出了createtbody()還有：
i. var thead=table.createthead();
ii. var tfoot=table.createtfoot();
b. table物件可以
刪除行分組
物件1). table.deletethead()
2). table.deletetfoot()
3).沒有
table.deletetbody()
c. table物件可以
獲取某個行分組
物件1). table.thead
2). table.tfoot
3). table.tbodies[i]
說明: html標準規定，
table
中可以包含多個
tbody
，所以table
將內部的可能多個
tbody
元素都放在
tbodies
陣列中，我們可通過下標
i，來訪問
table中第i
個tbody
物件。(2). 行分組物件管著行
物件:a. 行分組物件可
新增行:
1). 舊
dom: 2步
var tr=document.createelement("tr"); //先建立新行物件
2). html dom: var tr=行分組.insertrow()
插入新行
說明: insertrow()乙個函式辦兩件事
，既建立新行物件
，又將新行物件追加到行分組中
3). 固定套路
: i. 其實insertrow(i) 可在中間i位置插入乙個新行
，原位置的行被向後擠一位
ii. 想在開頭插入乙個新行 insertrow(0)
b. 行分組物件可
刪除行:
1). 行分組
.deleterow(i)
2). 坑: 用行分組物件刪除行時，i必須是
要刪除的行
在行分組內的相對位置
3). 問題: 如果看不出一行在行分組的下標位置是幾，還可通過要刪除的行物件的
rowindex
屬性，來獲得行的下標位置。但是，行物件的
rowindex
屬性是這一行在整個表中的下標位置！不是在行分組內的相對位置！所有行的
rowindex
屬性，因為受到表頭行的影響，很可能和行在行分組內的下標位置序號是錯位的。
tbody
.deleterow(
tr.rowindex)
很可能刪的不是想刪除的一行
，很可能是要刪除行的下乙個
4). 解決
: 今後，只要刪除**中的行，都應用
table
來刪除，而不是用行分組
i.table.deleterow(tr.rowindex)
ii. 因為主語變成了table，
deleterow
要求使用的下標範圍也變成了行在整個
table
中的下標。整個要求剛好和
tr.rowindex的意思吻合
！c. 獲取
一行: 行分組
.rows[i]
1). 說明:行分組已經將內部的所有tr物件
，放在了乙個rows屬性集合中
，可通過下標方式
，訪問行分組中第i行
(3). 行物件管著格
物件:a. 行物件可
新增乙個
新格:1). 舊dom: 2步
:i. var td=document.createelement("td"); //建立新的
td物件
td物件追加到tr中
2). html dom: var td=tr.insertcell()
插入新格
說明: insertcell()乙個函式做兩件事
，既建立新的td物件
，又將td物件追加到tr中
b. 行物件還可
刪除乙個格: tr.deletecell(i)
c. 行物件還可
獲得乙個格: tr.cells[i]
1) 說明: 行已經將內部的所有td物件
，放在了乙個cells屬性集合中
，可通過下標方式
，訪問行中第i個
格(4). 示例: 簡化動態建立**的例子
姓名薪資
年齡5. 表單:
(1). 獲取表單元素:
a. 舊
dom:
1). 有
name
屬性的表單
元素: 表單
.getelementsbyname("name")
2). 沒有
name
屬性的表單元素: 表單
.getelementsbytagname("
標籤名")
b. html dom:
1). form物件
已經將表單中的所有表單元素提前都儲存在了乙個elements屬性集合中。所以，可通過
: 表單.elements[i 或 id 或
name]
方式獲得表單中任意乙個表單元素
強調: 表單
.elements
集合中只包含四大類表單元素
，不包含其他非表單元素
(input select textarea button)
2). 如果
有name屬性
的表單元素
，還可進一步簡寫為: 表單.name名
c. form.length 獲得表單中所有表單元素的個數 == form.elements.length
(2). 讓表單元素獲得焦點: 表單元素
.focus()
(3). 示例: 實現自定義表單提交按鈕
文件物件DOM
dom節點型別 1 document 整個文件是乙個文件節點。2 每個xml標籤是乙個元素節點 3 包含xml元素中的文字是文字節點 4 每乙個xml屬性是乙個屬性節點 5 注釋屬於注釋節點 節點屬性和方法 1 nodename 節點的名字 2 nadevalue 節點的值 3 nidetype 節...
DOM物件總覽
dom物件總覽 dom物件的內容非常的多，為了方便查詢，下面把各個物件相關鏈結羅列於下表，以便於大家的查詢使用。列表如下 物件名稱 描述doucment 代表整個html文件，可被用來訪問頁面中的所有元素。anchor 代表元素 area 代表影象對映中的元素 base 代表元素 body 代表元素...
Dom物件模型
1.文件物件 節點分為元素節點 屬性節點 文字節點。window.onload function var box document.getelementbyid box 通過id查詢元素節點，dom等待 alert box.id 元素id值 alert box.tagname 元素名 alert b...