communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Méthode HTML DOM pour accéder aux éléments HTML

getElementById()

  • Fonction : Recherchez l'objet élément avec l'identifiant spécifié dans la page Web.

  • Syntaxe : var obj = document.getElementById(id)

  • Paramètres : id fait référence à la valeur de l'attribut id marqué dans le Web page.

  • Valeur de retour : renvoie un objet élément.

  • Exemple : var imgObj = document.getElementById(“img01”)

getElementsByTagName(tagName)

  • Fonction : recherchez la balise HTML spécifiée et renvoie un tableau.

  • Syntaxe : var arrObj = parentNode.getElementsByTagName(tagName)

  • Paramètres : tagName est le nom de la balise à trouver sans chevrons.

  • Valeur de retour : renvoie un tableau. S'il n'y a qu'un seul nœud, un tableau est également renvoyé.

  • Exemple : var arrObj = ulObj.getElementsByTagName("li")

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            window.onload = function(){
            //获取id=ulTag的网页对象
            var ulObj = document.getElementById("question");
            //查找<ul>下的所有的<li>标记
            var arrObj = ulObj.getElementsByTagName("li");
            //给所有的<li>标记增加CSS效果
            for(var i=0;i<arrObj.length;i++)
            {
                //给每个<li>标记加style属性
                arrObj[i].style = "color:blue;font-size:24px;";
            }
        }
        </script>
    </head>
    <body >
        <ul id="question">
            <li>mac 中系统自带的apache 误删了怎么恢复</li>
            <li>CURL POST数据量过大，接收不到服务端的信息</li>
            <li>用了构造函数为什么这个还是2？</li>
            <li>cookies登录原理</li>
        </ul>
</html>
Formation continue
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script type="text/javascript"> window.onload = function(){ //获取id=ulTag的网页对象 var ulObj = document.getElementById("question"); //查找<ul>下的所有的<li>标记 var arrObj = ulObj.getElementsByTagName("li"); //给所有的<li>标记增加CSS效果 for(var i=0;i<arrObj.length;i++) { //给每个<li>标记加style属性 arrObj[i].style = "color:blue;font-size:24px;"; } } </script> </head> <body > <ul id="question"> <li>mac 中系统自带的apache 误删了怎么恢复</li> <li>CURL POST数据量过大，接收不到服务端的信息</li> <li>用了构造函数为什么这个还是2？</li> <li>cookies登录原理</li> </ul> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492832 joue