JS简单获得节点元素的方法示例


Posted in Javascript onFebruary 10, 2018

本文实例讲述了JS简单获得节点元素的方法。分享给大家供大家参考,具体如下:

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

运行效果:

JS简单获得节点元素的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
Javascript的this用法
Jan 16 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
JS简单添加元素新节点的方法示例
Feb 10 #Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 #Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 #Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 #Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 #Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 #Javascript
You might like
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
浅析python标准库中的glob
2020/03/13 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Django跨域请求原理及实现代码
2020/11/14 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
心理学专业求职信
2014/06/16 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
地方白酒代理协议书
2014/10/25 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
部分武汉产收音机展览
2022/04/07 无线电
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python