005 根據css選擇器訪問HTML元素

2021-09-12 04:12:11 字數 789 閱讀 1783

根據css選擇器來訪問html元素由document的如下方法提供支援。

對於指定了唯一的id屬性值的html元素,既可以使用前面介紹的getelementbyid()方法來獲取,也可以使用此處的queryselector()方法來獲取,此處只要傳入css的id選擇器即可。

下面**示範了queryselector()用法。

從上面**可以看出,該示例與前乙個示例基本相同,只是不再使用getelementbyid()方法來獲取html元素,而是使用queryselector()方法來獲取----由此處使用id選擇器來獲取html元素,因此需要使用#idval的形式。

下面**示範了queryselectorall()方法同時獲取多個html元素情形。

上面頁面**中定義了3個元素,粗體字**使用queryselectorall(「div」)獲取頁面上所有元素,這樣既可同時返回3個元素組成的nodelist。接下來程式採用迴圈遍歷nodelist所包含的每哥html元素,並逐個修改他們的寬度、高度、背景色等。

在瀏覽器中瀏覽該頁面,並單擊頁面上的按鈕既可以看到如上效果。

HTML之CSS選擇器

基礎選擇器 基礎選擇符就是id,標籤,類選擇符 復合選擇器 復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。交集選擇器 交集選擇器由兩個選擇器構成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.spec...

HTML與CSS的CSS選擇器

在 css 中,選擇器是一種模式,用於選擇需要新增樣式的元素。css選擇器有很多,掌握常用的即可 基本選擇器 通用選擇器 選擇所有 元素選擇器 選擇指定標籤 元素名稱 p id選擇器 選擇設定過指定id屬性值的元素 id屬性值 p1 類選擇器 選擇設定過指定class屬性值的元素 class屬性值 ...

操作HTML資料,CSS選擇器

在css 中,選擇器是一種模式,用於選擇需要新增樣式的元素。css 列指示該屬性是在哪個 css 版本中定義的。css1 css2 還是 css3。選擇器 例子 例子描述 css class intro 選擇 class intro 的所有元素。1 id firstname 選擇 id firstn...