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版)
Nov 19 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
express.js中间件说明详解
Mar 19 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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实现手机归属地查询API接口实现代码
2012/08/27 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python探索之ModelForm代码详解
2017/10/26 Python
Python实现抢购IPhone手机
2018/02/07 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
中间件分为哪几类
2012/03/14 面试题
Java面向对象面试题
2016/12/26 面试题
精细化工应届生求职信
2013/11/17 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
优秀求职信范文分享
2013/12/19 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
教导主任个人总结
2015/03/03 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
运动会广播稿20字
2015/08/19 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android