HTML中javascript使用dom获取dom节点范例
<!-- HTML结构 -->
<div id="test-div">
<div class="c-red">
<p id="test-p">JavaScript</p>
<p>Java</p>
</div>
<div class="c-red c-green">
<p>Python</p>
<p>Ruby</p>
<p>Swift</p>
</div>
<div class="c-green">
<p>Scheme</p>
<p>Haskell</p>
</div>
</div>
定位如下:
第一种方法:
- // 选择<p>JavaScript</p>:
- //var js = document.getElementById('test-p');
- // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
- //var arr = document.getElementsByClassName('c-red c-green')[0].children;
- // 选择<p>Haskell</p>:
- //var haskell = document.getElementsByClassName('c-green')[1].lastElementChild;
第二种方法:
- var js = document.querySelector('#test-p');
- var arr = document.querySelectorAll('#test-div > .c-red.c-green > p');
- var haskell = document.querySelectorAll('#test-div > .c-green > p')[4];
第三种方法:
- // 选择<p>JavaScript</p>: var js = document.getElementById('test-p');
- // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>: var arr = document.querySelectorAll('.c-red.c-green>p');
- // 选择<p>Haskell</p>: var haskell = document.getElementById('test-div').lastElementChild.lastElementChild;
HTML中javascript使用dom获取dom节点范例的更多相关文章
- JavaScript之怎样获取元素节点
JavaScript获取元素节点一共有三种方法,分别是通过元素ID.通过标签名字和通过类名字来获取: 1.通过元素ID属性的ID值来获得元素对象-getElementById() DOM提供了一个名为 ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- angular学习笔记-angular中怎么获取dom元素
步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- 【JavaScript与JQuery获取H2的内容】
撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...
- javascript获取dom的下一个节点方法
需求说明: 获取当前节点左节点或者右节点(兄弟节点): css: <style type="text/css"> a:focus { outline: none; } ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
随机推荐
- ArcEngine生成矩形缓冲区
这里生成缓冲区肯定是根据点进行生成的,说是生成缓冲区其实是根据点生成面.具体思路如下:首先根据点获取要生成矩形缓冲区的四个顶点的坐标,然后将这四个点生成面即可得到所谓的矩形缓冲区. //首先获取要生成 ...
- Ansible实现zabbix服务器agent端批量部署
项目需求:由于搭建zabbix,需要每台服务器都需要安装监控端(agent)正常的的操作是一台一台去安装,这样确实有点浪费时间,这里为大家准备了一款开源 的自动化运维工具Ansible,相信大家也很熟 ...
- C#学习笔记_14_接口&命名空间
14_接口&命名空间 接口 一系列规范 语法: 如果一个类的后面既有父类也有接口,那么一定是父类在前,接口靠后 一个类可以实现多个接口 规范:接口命名以大写字母 I 开头 接口中可以包含接口方 ...
- Python - 模块(二)
目录 Python - 模块(二) re re下面的方法 logging os Python - 模块(二) re re模块提供了正则表达式的相关操作 主要字符介绍: . 通配符,除了换行符之外的任意 ...
- Tensorflow人工智能入门(一)
前言: 作为一个程序员,已经离开开发岗好多年,最近突然迷茫了,不知道自己何去何从.互联网技术发展的速度已快得难以想象,许久不码代码的手也越来越僵直,需求沟通中的套话和空话却越发的熟练,这和当年入行时的 ...
- Django获取当前页面的URL——小记
获取带参数URL:request.get_all_path() 获取不带参数URL:request.path 获取主机地址:request.get_host()
- DOM对象属性(property)与HTML标签特性(attribute)
HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...
- [转]C#操作SQL Server数据库
转自:C#操作SQL Server数据库 1.概述 ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlComman ...
- sysman 账号 oracle em console的一些问题
前几天用下面的命令修改了 sysman的密码. [oracle@racnode1 ~]$ emctl setpasswd dbconsole Oracle Enterprise Manager 11g ...
- keras 与tensorflow 混合使用
keras 与tensorflow 混合使用 tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > t ...