亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

js如何獲取dom元素

Original 2019-03-02 16:47:32 419
abstrakt:dom:HTML DOM ,文檔對(duì)象模型(Document Object Model)的簡(jiǎn)稱(chēng),當(dāng)網(wǎng)頁(yè)被加載時(shí),瀏覽器就會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型。通常,通過(guò) JavaScript,我們需要操作 HTML元素。為了做到這件事情,就必須首先查找并獲取到該元素。在JavaScript中中通過(guò)dom查找并獲取元素對(duì)象主要有三種常見(jiàn)方法:1、通過(guò) id 查找并獲取到元素:getElementById()get

dom:HTML DOM ,文檔對(duì)象模型(Document Object Model)的簡(jiǎn)稱(chēng),當(dāng)網(wǎng)頁(yè)被加載時(shí),瀏覽器就會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型。

通常,通過(guò) JavaScript,我們需要操作 HTML元素。為了做到這件事情,就必須首先查找并獲取到該元素。在JavaScript中中通過(guò)dom查找并獲取元素對(duì)象主要有三種常見(jiàn)方法:

1、通過(guò) id 查找并獲取到元素:getElementById()

getElementById() 方法:通過(guò)ID獲得節(jié)點(diǎn)元素,如果頁(yè)面上含有多個(gè)相同id的節(jié)點(diǎn)對(duì)象,那么只返回第一個(gè)節(jié)點(diǎn)對(duì)象。

語(yǔ)法:

document.getElementById("元素的id");

示例代碼:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <body>

        <div id="box" onclick="getValue()">我是測(cè)試代碼</div>

        <script>

        function getValue(){

          var x=document.getElementById("box")

          alert(x.innerHTML)

         }

        </script>

    </body>

</html>

2、通過(guò)標(biāo)簽名查找并獲取到元素:getElementsByTagName()

getElementsByTagName()方法:是通過(guò)元素的標(biāo)簽名來(lái)查找并獲取一組元素對(duì)象(有多少就獲取多少),其返回的是帶有指定標(biāo)簽名的對(duì)象集合。

語(yǔ)法:

document.getElementsByClassName("元素的標(biāo)簽名");

示例代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>Hello World!</p>

 

<div id="main">

     <p>The DOM is very useful.</p>

     <p>本例演示 <b>getElementsByTagName</b> 方法。</p>

</div>

<script>

var x=document.getElementById("main");

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

document.write('id 為 "main" 的 div 中的第一段文本是:' + y[0].innerHTML);

</script>

 

</body>

</html>

3、通過(guò)class(類(lèi))查找并獲取到元素:getElementsByClassName()

getElementsByClassName()方法:是通過(guò)指定的class(類(lèi))屬性值來(lái)查找并獲取元素的,其返回的是帶有指定類(lèi)名的元素集合,可以說(shuō)它是一個(gè)對(duì)象的集合。

語(yǔ)法:

document.getElementsByClassName("元素的class");、

示例代碼:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <body>

        <div id="main">

            <p class="a">我是測(cè)試代碼1</p>

            <p class="a">我是測(cè)試代碼2</p>

        </div>

        <script>

            var x = document.getElementById("main");

            var y = x.getElementsByClassName("a");

            document.write('id 為 "main" 的 div 中的第一段文本是:' + y[0].innerHTML);

        </script>

    </body>

</html>




Korrigierender Lehrer:韋小寶Korrekturzeit:2019-03-02 17:46:35
Zusammenfassung des Lehrers:寫(xiě)的很不錯(cuò) css中的選擇器很多語(yǔ)言都是通用的 這一點(diǎn)必須要好好掌握

Versionshinweise

Beliebte Eintr?ge