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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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项目的方法
2006/10/09 PHP
php操作xml
2013/10/27 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
如何定义TensorFlow输入节点
2020/01/23 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
办公室经理岗位职责
2014/01/01 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
采购部2015年度工作总结
2015/07/24 职场文书