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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
php生成word并下载代码实例
2019/03/15 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Django的Modelforms用法简介
2019/07/27 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
5s标语大全
2014/06/23 职场文书
2014年医务科工作总结
2014/12/18 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
Go语言入门exec的基本使用
2022/05/20 Golang
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android