查詢節點
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
div1<
/div>
紅燒鯉魚<
/li>
回鍋肉<
/li>
麻辣小龍蝦<
/li>
<
/ul>
// 在dom樹里，可以從乙個元素出發找到其他任意乙個元素，雖然一般也不用這麼麻煩，但是這個道理要明白
var ul = document.
queryselector
('ul'
)// 從ul出發找div，應該是上乙個兄弟元素
console.
log(ul.previouselementsibling)
// 紅燒鯉魚
console.
log(ul.firstelementchild)
// 麻辣小龍蝦
console.
log(ul.lastelementchild)
// 如果要獲取中間的，那麼找到所有子元素再通過下標來取
<
/script>
<
/body>
<
/html>
文件碎片
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
<
/ul>
var ul = document.
queryselector
('ul'
)// 往ul裡加入10個li
// for(var i = 0; i < 10; i++)
// 2、可以用乙個文件碎片先把10個li放入碎片裡
// 然後只需要一次把碎片插入ul就行了，這樣就只有一次dom操作了
// 這種寫法雖然看起來更麻煩，但是減少了dom操作的次數，效能更優
var cache = document.
createdocumentfragment()
for(var i =
0; i <
10; i++
)// 當for結束以後把cache插入到ul裡
ul.(cache)
<
/script>
<
/body>
<
/html>
元素尺寸
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
.box
<
/style>
<
/head>
="box"
>
<
/div>
var box = document.
queryselector
('.box'
)// box.style 這種方式只能獲取或者設定行內樣式
console.
log(box.style.width)
// 獲取內部或者外部的樣式
// 非ie瀏覽器寫法
var width =
getcomputedstyle
(box,
false
).width
console.
log(width)
// 根據相容性封裝乙個獲取是最終生效的樣式，無論是行內還是內部或者外部
// obj: 要獲採樣式的物件
// attr: 屬性名
function getstyle
(obj,attr)
else
} var height =
getstyle
(box,
'height'
) console.
log(height)
<
/script>
<
/body>
<
/html>
dom 查詢元素節點
var div document.getelementsbytagname div 0 查詢元素節點，方法會存在一些相容性問題，ie低版本瀏覽器不支援 console.log div.parentelement 父元素節點 console.log div.children 子元素節點 console...
封裝函式 查詢節點元素
abc 操作一 封裝函式，返回元素第n層祖先元素節點 操作二 封裝mychildren功能，解決部分瀏覽器相容性問題 找該元素的子元素節點，自己實現 element.prototype.mychildren function else return ele var span document.get...
WPF 查詢父 子控制項（元素 節點）
整理一下專案中常用的找控制項功能，包括找父 子控制項 找到所有同型別子控制項 比如listbox找到所有item using system using system.collections.generic using system.linq using system.text using syste...