今野由爱毛片在线播放,九九在线精品,这里只有精品66

這篇文章將教會大家如何查找和訪問網(wǎng)頁中的HTML元素。

一篇文章帶你了解JavaScript htmldom 元素

一、找到HTML元素

通常，使用JavaScript，想操作HTML元素。要做到這一點，必須先找到元素。有幾種方法可以做到這一點。

找到DOM中的HTML元素的最簡單的方法，是利用元素的id。

使用id="intro"找到元素 :

var myElement = document.getElementById("intro");

如果找到元素，則該方法將返回元素作為對象 (賦值給myElement)。

元素沒有被發(fā)現(xiàn)，myElement將是空的。

二、通過標簽名稱找到HTML元素

找到所有<p>元素:

var x = document.getElementsByTagName("p");

這個例子使用id="main"找到元素 , 并且在"main"里面找到所有的 <p> 元素:

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

三、通過類名稱找到HTML元素

如果想找到同一類名稱的所有HTML元素，使用getElementsByClassName()。

例：

返回所有class="intro"的元素列表.

var x = document.getElementsByClassName("intro");

在Internet Explorer 8和早期版本中，按類名查找元素不起作用。

四、通過CSS選擇器找到HTML元素

如果想找到所有的HTML元素，匹配指定的CSS選擇器 (id, 類名, 類型, 屬性, 屬性值, 等等), 使用querySelectorAll() 方法。

此示例返回所有class="intro"的

元素列表。

var x = document.querySelectorAll("p.intro");

querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。

五、通過HTML對象集合找到HTML元素

此示例查找id="frm1"的表單元素,在表單集合里,并顯示所有的顏色值。

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

下面的HTML對象(或對象的集合)也可訪問:

1. document.anchors

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>
</body>
</html>

一篇文章帶你了解JavaScript htmldom 元素

2. document.body

<script>
alert(document.body.innerHTML);
</script>

一篇文章帶你了解JavaScript htmldom 元素

3. document.embeds

<script>
document.getElementById("demo").innerHTML =
"Number of embeds: " + document.embeds.length;
</script>

一篇文章帶你了解JavaScript htmldom 元素

4. document.head

<script>
document.getElementById("demo").innerHTML = document.head;
</script>

一篇文章帶你了解JavaScript htmldom 元素

5. document.images

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body>
<img src="pic_htmltree.gif">
<img src="pic_navigate.gif">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>
</body>
</html>

一篇文章帶你了解JavaScript htmldom 元素

6. document.title

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "The title of this document is: " + document.title;
</script>
</body>
</html>

一篇文章帶你了解JavaScript htmldom 元素

HTML DOM允許JavaScript獲取和更改HTML元素的屬性。

六、擴展

獲取元素的屬性值

getAttribute()方法用于獲取元素上指定屬性的當前值。

以下示例獲取錨元素的href和title屬性的值。

var link = document.getElementById("demo");
var href = link.getAttribute("href");
var title = link.getAttribute("title");

1. 在元素上設置屬性

setAttribute()方法用于設置指定元素上的屬性的值。

如果屬性已經(jīng)存在，則更新值;否則，將添加具有指定名稱和值的新屬性，將href屬性的值設置為錨元素：

例

var x = document.getElementsByTagName("a")[0];
x.setAttribute("href", "https://www.baidu.com/css3/");

一篇文章帶你了解JavaScript htmldom 元素

同樣，可以使用setAttribute( )方法來更新或更改HTML元素上現(xiàn)有屬性的值。

例

document.getElementsByTagName("input")[0].setAttribute("type", "text");

完整代碼：

<!DOCTYPE html>
<html>
<title>項目</title>
<body style="background-color: aqua;">
<p>單擊按鈕可將輸入按鈕更改為輸入字段:</p>
<input type="button" onclick="myFunc(this)" value="Click me">
<script>
function myFunc(x) {
x.setAttribute("type", "text");
}
</script>
</body>
</html>

一篇文章帶你了解JavaScript htmldom 元素

2. 從元素中刪除屬性

removeAttribute()方法用于從指定元素中刪除屬性。

本示例從錨元素中移除href屬性：

document.getElementsByTagName("a")[0].removeAttribute("href");

一篇文章帶你了解JavaScript htmldom 元素

七、總結

本文基于JavaScript基礎，介紹了Html元素，從最基本的通過標簽名找Html元素，通過類名找Html元素。通過CSS選擇器找Html元。最后擴展如何設置元素屬性，如何去刪除元素屬性。通過豐富的效果圖展示，能夠幫助讀者更好的了解Html元素。

代碼很簡單了，希望能夠幫助你。

原文地址：https://mp.weixin.qq.com/s?__biz=MzA4Njg4MDgwNQ==&mid=2247484836&idx=1&sn=ff46f5b61d288d4fb9cea64eab68865c&chksm=9fc0a2eea8b72bf847e3e0eb88873e238097c8c7625c7985e77136fb70fbe8c0fa48515ca38c&mpshare=1&