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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Vue.js中的组件系统
May 30 Javascript
JS快速实现简单计算器
Apr 08 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中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
javascript 自定义事件初探
2009/08/21 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
BP神经网络原理及Python实现代码
2018/12/18 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
在python中使用nohup命令说明
2020/04/16 Python
python中pop()函数的语法与实例
2020/12/01 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
电子专业推荐信范文
2013/11/18 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
团组织推优材料
2014/12/29 职场文书
刮痧观后感
2015/06/05 职场文书
冰雪公主观后感
2015/06/16 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS