How to get node elements using JS-JS Tutorial-php.cn

How to get node elements using JS

亚连

Release： 2018-06-06 11:34:35

Original

1698 people have browsed it

This article mainly introduces the simple method of obtaining node elements in JS, and analyzes the related operation techniques of javascript to obtain page node elements and modify element attributes in the form of examples. Friends in need can refer to the following

Examples of this article A simple way to get node elements in JS. Share it with everyone for your reference, the details are as follows:

<!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>

Copy after login

Operation effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

How to use the compile operation method in Vue

In element ui, the dialog box el-dialog close event ( Detailed tutorial)

How to implement the dialog box in vue

The above is the detailed content of How to get node elements using JS. For more information, please follow other related articles on the PHP Chinese website!