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 函数分析(转)
Mar 21 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
详解Bootstrap按钮
Jan 04 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 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实现最简单的MVC框架实例教程
2014/09/08 PHP
php简单生成随机数的方法
2015/07/30 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
ExpressJS入门实例
2015/01/14 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
详解node中创建服务进程
2017/05/09 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
35个Python编程小技巧
2014/04/01 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python调用.NET库的方法步骤
2019/12/27 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Python读取yaml文件的详细教程
2020/07/21 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
护士自荐信怎么写
2013/10/18 职场文书
捐资助学倡议书
2014/04/15 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
周一问候语大全
2015/11/10 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Redis批量生成数据的实现
2022/06/05 Redis