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网 ...
随机推荐
- CAD对象的夹点被编辑完成后调用事件(com接口VB语言)
主要用到函数说明: _DMxDrawXEvents::ObjectGripEdit 对象的夹点被编辑完成后,会调用该事件,详细说明如下: 参数 说明 LONGLONG lId 对象的id LONG i ...
- sublime text3 verilog代码编写高级操作篇
2018.10.21 好久没写博客了,这段时间一直在学习一直在沉淀,然而发现学的越多会的更少,只能快马加鞭吧! 博主从大一暑假接触FPGA,到现在快一年半了,时间恍逝.刚开始入门也是用的quartus ...
- 00.模块1.模块(Module)和包(Package)
转自廖雪峰老师官方网站 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件 ...
- RAID-独立磁盘冗余阵列
此文章理论部分内容大多数摘自网站 开心技术园 的一篇文章,但并做了一些修改与调整.理论部分原文链接:图文并茂 RAID 技术全解 – RAID0.RAID1.RAID5.RAID100-- 本文实验部 ...
- Django REST framework - 权限和限制
目录 Django REST framework 权限和限制 (你能干什么) 设置权限的方法 案例 第一步: 定义一个权限类 第二步: 使用 视图级别 全局级别设置 --- 限制 (你一分钟能干多少次 ...
- scrapy——4 —反爬措施—logging—重要参数—POST请求发送实战
scrapy——4 常用的反爬虫策略有哪些 怎样使用logging设置 Resquest/Response重要参数有哪些 Scrapy怎么发送POST请求 动态的设置User-Agent(随即切换Us ...
- 【codeforces 796A】Buying A House
[题目链接]:http://codeforces.com/contest/796/problem/A [题意] 让你选一个最靠近女票的,且能买的房子; 输出你和你女票的距离; [题解] 枚举 [Num ...
- Leetcode 41.缺失的第一个正数
缺失的第一个正数 给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3 示例 2: 输入: [3,4,-1,1] 输出: 2 示例 3: 输入: ...
- codevs 1700 施工方案第二季
1700 施工方案第二季 2012年市队选拔赛北京 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description c国边防 ...
- linux系统读写缓存
1. 操作系统缓存 在linux世界里,一切可读写设备都可看作是文件.文件cache设计的好坏直接影响着文件系统和磁盘的性能.最直观的是使用free命令看到的cached列. 这里面的cached列 ...