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的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Vue实现商品详情页的评价列表功能
Sep 04 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删除数组元素示例分享
2014/02/17 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
javascript基本类型详解
2014/11/28 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
python实现各进制转换的总结大全
2017/06/18 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python如何求解两数的最大公约数
2018/09/27 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python必须了解的35个关键词
2020/07/16 Python
2014年精神文明建设工作总结
2014/11/19 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
投诉书范文
2015/07/02 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript