"box"
class
="one"
name
="bbb"
style
="width
: 100px;
height
: 100px;
background-color
: pink;
">
div1div
>
"box1"
class
="one"
>
div1div
>
"box2"
class
="one"
>
div1div
>
通過 id來獲取元素
var box = document.
getelementbyid
("box");
//頁面元素
var box = document.
getelementbyid
("one");
//null
console.
log(box)
;
注意 :
根據id獲取頁面元素 如果id不存在,獲取到的是null id具有唯一性 所以不要使用同名id通過 class類名來獲取元素
var one = document.
getelementsbyclassname
("one");
console.
log(one)
;//獲取的是乙個偽陣列
one.
reverse()
;//報錯 偽陣列不能呼叫陣列的方法
通過標籤名獲取元素
var divs = document.
getelementsbytagname
("div"
)//獲取的是偽陣列
通過name屬性獲取元素
var bbb = document.
getelementsbyname
("bbb"
)// 適用於擁有name屬性的表單元素 獲取的也是偽陣列
queryselector() 方法返回文件中匹配指定 css 選擇器的乙個元素
var one = document.
queryselector
(".one");
console.
log(one)
;
queryselectorall() 返回所有的元素
var onelist = document.
queryselectorall
(".one");
console.
log(onelist)
; console.
log(onelist[0]
);
js 獲取DOM元素樣式
html的樣式寫入方法有 1 行內樣式 2 內嵌樣式 3 外聯樣式表。行內樣式 一般是用style寫在dom元素上的,例如 內嵌樣式 一般是用style寫在head標籤內的。外聯樣式 一般是用link標籤或者是import引入的。但import引入的時候一定要放在style標籤內。獲採樣式 一 el...
js 獲取dom元素方法
js 獲取dom元素的八種方法 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...
原生JS獲取dom元素高度
clientheight,scrollwidth,offsetwidth的區別 用body 測試 網頁實際寬 document.body.clientwidth 網頁實際高 document.body.clientheight 網頁實際寬 document.body.offsetwidth 包括邊線...