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魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
angularJS中router的使用指南
Feb 09 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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使用codebase生成随机数
2014/03/25 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js密码强度校验
2015/11/10 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
厨师岗位职责
2013/11/12 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
好员工观后感
2015/06/17 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技