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弹出层插件简化版代码下载
Oct 16 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
vue实现购物车的小练习
Dec 21 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
js友好的时间返回函数
2016/08/24 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python 如何调用 dubbo 接口
2020/09/24 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
银行求职推荐信范文
2013/11/30 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android