首页
/
每日頭條
/
生活
/
前端中dom包含哪些
前端中dom包含哪些
更新时间:2024-04-18 08:47:58

1、什麼是DOM樹?

當浏覽器加載HTML 頁面的時候,首先就是DOM結構的計算,計算出來的DOM 結構就是DOM 樹(把頁面中的HTML标簽像樹的結構一樣,分析出之間的層級結構關系)

DOM樹描述了标簽與标簽之間的關系(節點間的關系),我們隻要知道任何一個标簽,都可以依據DOM中提供的屬性和方法,獲取到頁面中任意另一個标簽或者節點。

前端中dom包含哪些(前端系列DOM樹以及DOM常用方法)1

2、在JS中獲取DOM元素的方法

1)getElementById

a、通過元素的ID獲取指定的元素對象,使用的時候都是document.getElementById(''),此處的document是限定了獲取元素的範圍,我們把它稱之為“上下文[context]”;

b、getElementById的上下文隻能是document

因為嚴格意義上每一個頁面上的ID是不能重複的,浏覽器規定在整個文檔中可以獲取這 個唯一的Id。

如果頁面中的Id重複了,我們基于這個方法隻能獲取到第一個元素,後面相同的ID元素無法獲取。

c、在Ie6-7浏覽器中,會把表單元素input的name屬性值當做id來使用(建議:以後使用表單元素時,不要讓name和id的值有沖突)

2)getElementsByTagName

[context].getElementsByTagName——在指定的上下文中,根據标簽名獲取到一組元素集合(HTMLCollection)

a、獲取的元素是一個類數組(不能直接的使用數組中的方法),每一項對應的是一個元素對象(有一些自己的内置屬性)

b、它會把當前上下文中,子子孫孫(後代)層級内的标簽都獲取到(獲取的不僅是兒子級的)

c、基于這個方法獲取到的永遠都是一個集合(不管裡面是否有内容,也不管有幾項,它是一個容器或者集合),如果想操作集合中具體的某一項,需要基于索引獲取到才可以

3)getElementsByClassName

[context].getElementsByClassName’在指定的上下文中,基于元素的樣式類名(class=‘xxx‘)獲取到一組元素集合. 真實項目中,我們經常是基于樣式類給元素設置樣式,所以在JS中,我們也會經常基于樣式類來獲取元素,但是此方法在IE6-8下不兼容。

4)getElementsByName

document.getElementsByName() 它的上下文也隻能是document,在整個文檔中基于元素的name屬性值獲取一組節點集合(也是一個類數組)。

在IE浏覽器當中(IE9及以下),隻對表單元素的name元素起作用(正常來說,我們項目中隻會給表單元素設置name,給非表單元素設置name,其實是一個不太符合規範的操作)。

前端中dom包含哪些(前端系列DOM樹以及DOM常用方法)2

5)querySelector

[context].querySelector()——在指定的上下文中基于選擇器(類似于CSS選擇器)獲取到指定的元素對象(獲取的是一個元素,哪怕選擇器匹配了多個,我們隻獲取第一個)

6)querySelectorAll

在querySelector的基礎上,我們獲取到選擇器匹配的所有元素,結果是一個節點集合

querySelector、querySelectorAll都是不兼容IE6-8浏覽器的(不考慮兼容的情況下,我們能用byid或者其他方法獲取到,也盡量不要用這兩個方法,這兩個方法性能消耗較大)。

document.querySelectorAll(‘#box’);

document.querySelectorAll(‘.box’);

document.querySelectorAll(‘[name=”hobby”]’);

7)document.head

獲取head元素對象

8)document.body

獲取body元素對象

9)document.documentElement

獲取HTML元素對象

前端中dom包含哪些(前端系列DOM樹以及DOM常用方法)3

擴展://=>需求:獲取浏覽器一屏幕的寬度和高度(兼容所有的浏覽器)

document.documentELement.clientWidth || document.body.clientWidth

document.documentELement.clientHeight || document.body.clientHeight

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
bsci認證的具體内容(BSCI認證有效期多久)
bsci認證的具體内容(BSCI認證有效期多久)
  工廠參與BSCI認證後,是否需要進行年審,BSCI認證的有期限是一次性的還是有固定的期限呢?來看看BSCI的官方怎麼回應的:      BSCI認證有效期   How long is the new audit validity compared to the previous system? 與以前的系統相比,新的BSCI認證有效期有多長時間?For ...
2024-04-18
韓國男團泰國成員(泰國演員Yorch作為韓國新人男團Trainee)
韓國男團泰國成員(泰國演員Yorch作為韓國新人男團Trainee)
     泰國網報道,1月20日,韓國HYBE公司(前Big Hit)将在2022年推出的新男子偶像團體Trainee A最後一名成員Yorch公開的消息在泰國各大網站刷屏,Yorch本人及Trainee A相關話題一度登上推特泰國區熱搜第一。      據悉,Yorch 2002年4月11日出生于泰國,是一名演員、模特,2017年與泰國3台簽約。雖然Yor...
2024-04-18
樸贊郁的經典電影(樸贊郁暗黑版色)
樸贊郁的經典電影(樸贊郁暗黑版色)
     李安的《色·戒》相信大家沒看過也聽說過,斬獲了第44屆台灣電影金馬獎最佳影片獎、第64屆威尼斯國際電影節最佳影片金獅獎,那場7分鐘的船戲,社長至今依然回味無窮。      咳咳,當然,這不是重點,重點是女主湯唯在卧底過程中,愛與恨、真與假、信任與背叛的内心糾葛。   在電視劇中,諜戰劇也有很大的吸引力,懸念的設置以及身在局中之人的掙紮是最大看點。 ...
2024-04-18
寄快遞用什麼東西寄最便宜(寄東西用哪個快遞比較便宜)
寄快遞用什麼東西寄最便宜(寄東西用哪個快遞比較便宜)
  快遞已經是人們生活中不可或缺的一部分,不管是城市還是農村,幾乎每個人都收發過快遞,可是你知道嗎?有些快遞公司為了節約成本,往往會選擇一些廉價的快遞,這樣的快遞雖然價格便宜,但是質量卻沒有保障,甚至還有可能會出現問題。那麼,寄東西用哪個快遞比較便宜?有沒有既便宜又能保證服務質量的快遞呢?今天就給大家介紹一下八戒惠遞這個收發快遞的平台,有了它,再也不用擔心這...
2024-04-18
bsci驗廠審核多久(分享一個BSCI驗廠被坑的真實案例)
bsci驗廠審核多久(分享一個BSCI驗廠被坑的真實案例)
     bsci驗廠   這是一個真實的案例:做BSCI驗廠真的要貨比三家,不是比開口價,而是要比最終所有費用。天下沒有免費的午餐,免費是最貴的,低價接下來就是無數的坑。希望那位仁兄吃一塹,長一智。   前幾天遇到這樣一個客戶,他的工廠是在江蘇蘇州那邊,工廠有約500多人,占地面積約5000多平米,公司業務涉及國内及國外地區。   去年剛步入外貿行業,因出...
2024-04-18
Copyright 2023-2024 - www.tftnews.com All Rights Reserved