Dom操作補充

dom查詢方式

直接查詢

var obj = document.getelementbyid('i1')

間接查詢

檔案內容操作：

innertext　　　　僅僅查詢文字內容

innerhtml　　　查詢全部內容(文字和標籤)

舉例：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
head
>
<
body
>
<
div 
id="i1"
>
丸子 
<
a>蘑<
span
>菇
span
>
a>
div>
<
input 
type
="text"
id="i2"
>
<
select 
id="i3"
>
<
option 
value
="11"
>北京1
option
>
<
option 
value
="12"
>北京2
option
>
<
option 
value
="13"
>北京3
option
>
select
>
<
textarea 
id="i4"
>
textarea
>
body
>
html
>

obj = document.getelementbyid('i1')

<
div 
id=​"i1"
>​…​
div>
​obj.innertext
"丸子 蘑菇"
obj.innerhtml"丸子
蘑菇"

var obj = document.getelementbyid('i1')

undefined
obj = document.getelementbyid('i1')
<
div 
id=​"i1"
>​貓咪​
div>
​obj.innertext
"丸子 蘑菇"
obj.innertext = "貓咪"
"貓咪"

obj = document.getelementbyid('i1')

<
div 
id=​"i1"
>​…​
div>
​obj.innertext
"丸子 蘑菇"
obj.innertext ="
<
a href
=''>wanzi
a>""
<
a href
=''>wanzi
a>"
obj.innertext
"wanzi"

使用innerhtml就會把標籤設定上

value

對於input標籤 獲取input的值，也可以修改input的值

obj = document.getelementbyid('i2')

<
input 
type
=​"text" 
id=​"i2"
>
​obj.value
""obj.value
"hahahah"
obj.value = "wanzi"
"wanzi"

obj = document.getelementbyid("i3") 

<
select 
id=​"i3"
>​…​
select
>
​obj.value
"11"
obj.value = 12
12obj.value = 13
13

obj = document.getelementbyid("i4") 

<
textarea 
id=​"i4"
>​
textarea
>
​obj.value
""obj.value = "wanzi"
"wanzi"

搜尋框的例子：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
head
>
<
body
>
<
div 
style
="width:600px;margin:0 auto;"
>
<
input 
id="i1"
onfocus
="focus();"
onblur
="blur();"
type
="text"
value
="請輸入關鍵字"
>
<
input 
type
="text"
placeholder
="請輸入關鍵字"
>
div>
<
script
>
function
focus()
}function
blur()
}script
>
body
>
html
>

DOM 事件屬性補充

1.dom2事件處理程式的新增 利用addeventlistener 方法新增 a 格式 節點.addeventlistener 事件名稱 函式名,事件流 b 注意事項 l 同一節點可以新增多個相同的事件，這些事件會依次執行 l 刪除事件時需要用到removeeventlistener 格式 節點....

譯 補充 理解 DOM 座標

在瀏覽器中有兩種座標系統 滑鼠座標 1.相對於 document 座標 0,0 在整個頁面的最左上角。2.相對於 window 座標 0,0 在可視區 viewport 的最左上角。3.滑鼠座標 通常透過事件取得。當頁面還沒捲動時 window 和 document 的原點 0,0 與其他座標是相同...

DOM知識點補充

一 元素物件的屬性及自定義屬性的設定或獲取？物件.屬性 物件 屬性 物件.getattribute 屬性名 物件.setattribute 屬性名 屬性值 物件.removeattribute 屬性名 二 outerhtml 獲取當前元素物件及所有內容 innerhtml 設定或獲取當前元素物件內的...