Maison > interface Web > js tutoriel > le corps du texte

Comment obtenir des éléments de nœud en utilisant JS

亚连
Libérer: 2018-06-06 11:34:35
original
1698 Les gens l'ont consulté

Cet article présente principalement la méthode simple d'obtention d'éléments de nœud en JS et analyse les techniques de fonctionnement associées de javascript pour obtenir des éléments de nœud de page et modifier les attributs des éléments sous forme d'exemples. Les amis dans le besoin peuvent se référer à ce qui suit

Cet article explique les exemples Un moyen simple d'obtenir des éléments de nœud en JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net - JS几种获得节点元素的方法</title>
<script type="application/javascript">
  /* window.onload=function(){//文档就绪函数 表示当文档加载完成(图片视频等全部加载完成)
    var d=document.getElementById(&#39;d&#39;);
        //document.getElementByName();//得到数组  通过过下标调用
    d.innerHTML=&#39;asddddddddddd&#39;;
   //除通过Id查找(即getElementById)外其他几种查找方式返回的都是数组,通过下表调用
  }*/
  window.onload=function(){
    //找到Id为t1的td元素
    var t1=document.getElementById(&#39;t1&#39;);
    //获取父节点元素tr  通过parentNode
    var tr=t1.parentNode;
    //通过style属性设置背景颜色
    tr.style.backgroundColor=&#39;green&#39;;
    //获取tr标签的最后一个子元素
    var t3=tr.lastChild;
    //通过innerHTML属性改变元素内容
    t3.innerHTML=&#39;qwer&#39;;
  }
</script>
</head>
<body>
<table>
  <tr> <td id="">1</td>  <td>2</td>  <td>3</td> </tr>
  <tr> <td id="t1">1</td>  <td>2</td>  <td>3</td>  </tr
  <tr> <td>1</td>      <td>2</td>  <td>3</td>  </tr>
</table>
</body>
</html>
Copier après la connexion
Effet de l'opération :

Ce qui précède est ce que j'ai compilé pour tout le monde, J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser la méthode d'opération de compilation dans Vue

À propos de l'événement de fermeture de la boîte de dialogue el-dialog dans l'élément ui (Tutoriel détaillé)

Comment implémenter la boîte de dialogue contextuelle dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal