<!-- 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>

定位如下:

第一种方法:

  1. // 选择<p>JavaScript</p>:
  2. //var js = document.getElementById('test-p');
  3. // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
  4. //var arr = document.getElementsByClassName('c-red c-green')[0].children;
  5. // 选择<p>Haskell</p>:
  6. //var haskell = document.getElementsByClassName('c-green')[1].lastElementChild;

第二种方法:

  1. var js = document.querySelector('#test-p');
  2. var arr = document.querySelectorAll('#test-div > .c-red.c-green > p');
  3. var haskell = document.querySelectorAll('#test-div > .c-green > p')[4];

第三种方法:

  1. // 选择<p>JavaScript</p>: var js = document.getElementById('test-p');
  2. // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>: var arr = document.querySelectorAll('.c-red.c-green>p');
  3. // 选择<p>Haskell</p>: var haskell = document.getElementById('test-div').lastElementChild.lastElementChild;

HTML中javascript使用dom获取dom节点范例的更多相关文章

  1. JavaScript之怎样获取元素节点

    JavaScript获取元素节点一共有三种方法,分别是通过元素ID.通过标签名字和通过类名字来获取: 1.通过元素ID属性的ID值来获得元素对象-getElementById() DOM提供了一个名为 ...

  2. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

  3. angular学习笔记-angular中怎么获取dom元素

    步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...

  4. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

  5. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  6. 【JavaScript与JQuery获取H2的内容】

    撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...

  7. javascript获取dom的下一个节点方法

    需求说明: 获取当前节点左节点或者右节点(兄弟节点): css: <style type="text/css"> a:focus { outline: none; } ...

  8. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  9. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

随机推荐

  1. ArcEngine生成矩形缓冲区

    这里生成缓冲区肯定是根据点进行生成的,说是生成缓冲区其实是根据点生成面.具体思路如下:首先根据点获取要生成矩形缓冲区的四个顶点的坐标,然后将这四个点生成面即可得到所谓的矩形缓冲区. //首先获取要生成 ...

  2. Ansible实现zabbix服务器agent端批量部署

    项目需求:由于搭建zabbix,需要每台服务器都需要安装监控端(agent)正常的的操作是一台一台去安装,这样确实有点浪费时间,这里为大家准备了一款开源 的自动化运维工具Ansible,相信大家也很熟 ...

  3. C#学习笔记_14_接口&命名空间

    14_接口&命名空间 接口 一系列规范 语法: 如果一个类的后面既有父类也有接口,那么一定是父类在前,接口靠后 一个类可以实现多个接口 规范:接口命名以大写字母 I 开头 接口中可以包含接口方 ...

  4. Python - 模块(二)

    目录 Python - 模块(二) re re下面的方法 logging os Python - 模块(二) re re模块提供了正则表达式的相关操作 主要字符介绍: . 通配符,除了换行符之外的任意 ...

  5. Tensorflow人工智能入门(一)

    前言: 作为一个程序员,已经离开开发岗好多年,最近突然迷茫了,不知道自己何去何从.互联网技术发展的速度已快得难以想象,许久不码代码的手也越来越僵直,需求沟通中的套话和空话却越发的熟练,这和当年入行时的 ...

  6. Django获取当前页面的URL——小记

    获取带参数URL:request.get_all_path() 获取不带参数URL:request.path 获取主机地址:request.get_host()

  7. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

  8. [转]C#操作SQL Server数据库

    转自:C#操作SQL Server数据库 1.概述 ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlComman ...

  9. sysman 账号 oracle em console的一些问题

    前几天用下面的命令修改了 sysman的密码. [oracle@racnode1 ~]$ emctl setpasswd dbconsole Oracle Enterprise Manager 11g ...

  10. keras 与tensorflow 混合使用

    keras 与tensorflow 混合使用 tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > t ...