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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 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 魔术函数使用说明
2010/02/21 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
php生成word并下载代码实例
2019/03/15 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
结婚喜宴家长答谢词
2014/01/15 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
环保倡议书500字
2014/05/15 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server