JS操作DOM节点查找
JS中常用的DOM操作事件，包括有节点查找，键盘鼠标事件等等，本文内容介绍DOM的节点查找。
<script>
window.onload = function(){
//children 与 childNodes
console.log( document.body.children ); //包含7个节点的数组
console.log( document.body.childNodes ); //包含7个实节点，以及8个空节点组成的 长度为15的数组
//firstChild 与 firstElementChild
console.log( document.body.firstChild ); //返回第一个节点，空节点 (换行)
console.log( document.body.firstElementChild ); //返回第一个实节点 <h1>同学们：</h1>
//lastChild 与 lastElementChild
console.log( document.body.lastChild ); //返回第一个节点，空节点 (换行)
console.log( document.body.lastElementChild ); //返回最后一个实节点 <div class="girls">乔宛如</div>
//nextSibling 与 nextElementSibling
console.log( document.getElementById("xiaoming").nextSibling ); //空节点
console.log( document.getElementById("xiaoming").nextElementSibling ); //<div class="boys">李雷</div>
//previousSibling 与 previousElementSibling
console.log( document.getElementById("xiaoming").previousSibling ); //空节点
console.log( document.getElementById("xiaoming").previousElementSibling ); //<h1>同学们：</h1>
//parentNode 与 offsetParent
console.log( document.getElementById("hanFather").parentNode ); //返回直接父级 <div class="parents">
console.log( document.getElementById("hanFather").offsetParent ); //返回第一个有定位属性的父级 <div class="parents_wrap"> 。。 如果没有定位父级，则返回body
}
</script>
console.log输出节点内容，元素内容
<body>
<h1>同学们：</h1>
<div class="boys" id="xiaoming">小明</div>
<div class="boys">李雷</div>
<div class="girls">韩梅梅</div>
<div class="parents_wrap">
<div> 韩梅梅父母：</div>
<div class="parents">
<div id="hanFather"> 父：韩小东</div>
<div> 母：刘琼瑶</div>
</div>
</div>
<div class="girls">刘晓玲</div>
<div class="girls">乔宛如</div>
</body>
JS操作DOM节点查找的更多相关文章
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- JS 操作Dom节点之样式
为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...
- JS操作DOM节点大全
1.Javascript删除节点 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法:parent. ...
- ionic+微信js-sdk集成初步融合，在子路由页引入js操作dom节点
.controller('yaoheCtrl',['$scope',function ($scope) { $scope.$watch('$viewContentLoaded',function(ev ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）
[JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
随机推荐
- 攻防世界 web 新手练习 刷题记录
1.view_source 既然让看源码,那就F12直接就能看到. 2.robots 先百度去简单了解一下robots协议 robots协议(robots.txt),robots.txt文件在网站根目 ...
- buuctf——easyjava
虽然学过Javaweb的开发,但没好好学,所以对Javaweb了解不深 菜的真实 WEB-INF/web.xml泄露 贴一个别人的源码泄露总结ctf/web源码泄露及利用办法[总结中] WEB-INF ...
- Bugku-CTF加密篇之ok（Ook！）
- 三 模拟实现顺序表ArrayList
/** * 顺序表,重点是数组动态扩容,插入 * 底层采用数组,长度可以动态变化,此处采用增长一倍 * java.util.ArrayList每次增长50% * int newCapacity = ...
- Update(Stage5)：DMP项目_业务介绍_框架搭建
DMP (Data Management Platform) 导读 整个课程的内容大致分为如下两个部分 业务介绍 技术实现 对于业务介绍, 比较困难的是理解广告交易过程中各个参与者是干什么的 对于技术 ...
- 【PAT甲级】1039 Course List for Student (25 分)（vector嵌套于map，段错误原因未知）
题意: 输入两个正整数N和K(N<=40000,K<=2500),分别为学生和课程的数量.接下来输入K门课的信息,先输入每门课的ID再输入有多少学生选了这门课,接下来输入学生们的ID.最后 ...
- 刷题17. Letter Combinations of a Phone Number
一.题目说明 题目17. Letter Combinations of a Phone Number,题目给了下面一个图,输入一个字符串包括2-9,输出所有可能的字符组合. 如输入23所有可能的输出: ...
- 5种JVM调优配置方法概览
1 堆设置 -Xms:初始堆大小 -Xmx:最大堆大小 -XX:NewSize=n:设置年轻代大小 -XX:NewRatio=n:设置年轻代和年老代的比值.如:为3,表示年轻代与年老代比值为1:3,年 ...
- git合并分支到主干
1.从当前分支切换主干 git checkout master 2.更新主干内容到本地 git pull 4.提交分支,并将分支merge到主干 git merge dev 5: i键后输入备注 输 ...
- [蓝桥杯2016初赛]卡片换位 BFS
题目描述 你玩过华容道的游戏吗?这是个类似的,但更简单的游戏.看下面 3 x 2 的格子 +---+---+---+ | A | * | * | +---+---+---+ | B | | * | + ...