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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
Javascript面向对象编程
Mar 18 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
js+canvas实现纸牌游戏
Mar 16 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的Socket通信之UDP通信实例
2015/07/02 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
用python写测试数据文件过程解析
2019/09/25 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python实现飞行棋游戏
2020/02/05 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
创业计划书——互联网商机
2014/01/12 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
学生会竞聘书范文
2014/03/31 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python