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 (十) jQueryUI常用功能实战
Feb 23 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
js实现点击生成随机div
Jan 16 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
javascript实现倒计时提示框
Mar 02 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生成Flash动画的实现代码
2010/03/12 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
js 通用订单代码
2013/12/23 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
numpy中索引和切片详解
2017/12/15 Python
python switch 实现多分支选择功能
2020/12/21 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
上课迟到检讨书
2014/01/19 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
小班秋游活动方案
2014/02/22 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
三年级学生评语大全
2014/12/26 职场文书
安全第一课观后感
2015/06/18 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android