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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
Javascript的比较汇总
Jul 25 Javascript
原生js实现吸顶效果
Mar 13 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
Vue实现背景更换颜色操作
Jul 17 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
dedecms系统常用术语汇总
2007/04/03 PHP
PHP $_FILES函数详解
2011/03/09 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
js 操作符汇总
2014/11/08 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
Javascript的this用法
2017/01/16 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
对python 调用类属性的方法详解
2019/07/02 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
医院总经理岗位职责
2014/02/04 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android