通過id獲取
id="box">
div>
let box= document.getelementbyid("box");
script>注意：getelementbyid()括號中的不需要在前面加「#」，因為方法就決定了括號中的值是乙個元素的id值。該方法返回乙個dom物件。
2. 通過class獲取
class="box">
div>
class="box">
div>
let boxcollection= document.getelementsbyclassname("box");
let box1 = boxlist[0];
let box2 = boxlist[1];
script>注意：getelementsbyclassname()括號中的不需要在前面加 「.」 ，因為方法就決定了括號中的值是乙個元素的class值。該方法返回乙個集合。不能直接給集合繫結事件，需要獲取到集合中的某乙個元素，然後再為元素繫結事件。
3. 通過標籤名獲取
id="box">
段落1p>
段落2p>
段落3p>
段落4p>
段落5p>
段落6p>
div>
let pcollection= document.getelementsbytagname("p");
script>注意: 該方法返回的也是乙個集合。
4. 通過name屬性獲取
id="box">
type="text"
name="user" />
div>
let userinput= document.getelementsbyname("user");
script>返回值如下：
注意：只有含有name屬性的元素(表單元素)才能通過name屬性獲取
5. 通過queryselector獲取
id="box">
div>
let box= document.queryselector("#box");
script>注意：queryselector()方法括號中的值是元素的選擇器，所以前面加了」#」符號，使用的是id選擇器。此方法直接返回dom物件本身。
6. 通過queryselectorall獲取
class="box">box1div>
class="box">box2div>
class="box">box3div>
class="box">box4div>
class="box">box5div>
let box1= document.queryselector(".box");
let boxes= document.queryselectorall(".box");
script>
結果如下圖：
注意：queryselector()和queryselectorall()方法括號中的取值都是選擇器，但從圖中我們可以看出，兩個方法是有區別的。當有多個class相同的元素時，使用queryselector()方法只能獲取到第乙個class為box的元素，而queryselectorall()獲取到了所有class為box的元素集合。
所有獲取dom物件的方法中，只有getelementbyid()和queryselector()這兩個方法直接返回的dom物件本身，可直接為其繫結事件。
getelement***型別的方法，除了通過id獲取元素，其他都返回乙個集合，如果需要取到具體的dom元素，需要加索引，如：document.getelementsbyclassname(「box」)[0] =>獲取class為box的所有元素中的第乙個dom元素。
queryselector()與queryselectorall()兩者的聯絡與區別：
聯絡： 兩者括號中的取值都是選擇器
區別： 當有多個class相同的元素時，使用queryselector()方法只能獲取到第乙個class為box的元素，而queryselectorall()獲取到了所有class為box的元素集合。
原生JS獲取dom元素高度
clientheight,scrollwidth,offsetwidth的區別 用body 測試 網頁實際寬 document.body.clientwidth 網頁實際高 document.body.clientheight 網頁實際寬 document.body.offsetwidth 包括邊線...
原生JS獲取DOM元素的方法
js獲取dom元素的方法 8種 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...
jquery物件和dom原生獲取的物件是不同的。
寫了乙個點選無縫滾動的demo，但是點選的時候如果上乙個不運動完成，在快速點選就會快閃。可是開始也清除定時器了，後來發現是傳入的jq物件，jqobj.timer 定時器，這裡jqobj沒法新增.timer，所以每次清空也是徒勞，根本就沒有新增上這個物件的屬性。用document,getelement...