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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
javascript 新浪背投广告实现代码
Jul 07 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
checkbox使用示例
Aug 23 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
小学向国旗敬礼活动方案
2014/09/27 职场文书
个人作风建设自查报告
2014/10/22 职场文书
农业项目投资意向书
2015/05/09 职场文书
转正申请报告格式
2015/05/15 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
大学运动会加油稿
2015/07/22 职场文书