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(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
随机推荐
- 浅谈SQL注入漏洞以及防范策略
--HeShiwei 2014-5-15 什么是SQL注入 SQL注入,指的是用户通过向登录框输入恶意字符,利用代码的字符串拼接漏洞进行网站注入攻击,最终导致整个网站用户表信息泄露的攻击方式.黑客就是 ...
- 【代码审计】MenInfo文件包含漏洞
代码审计是我之前一直不敢涉及的领域,它包含的知识面太广.最近才开始学习,前段时间写的第一篇代码审计的文章 更多的感觉像是一个黑盒测试.我也会尽量把文章写的通俗易懂.代码审计 0基础从大牛的蜕变 从这里 ...
- Java面向对象编程 -1.5
对象引用传递分析 类本身属于引用传递类型,既然是引用传递类型,那么就牵扯到内存的引用传递 所谓的引用传递的本质:同一块堆内存空间可以被不同的栈内存所指向,也可以更换指向. class Person{ ...
- leetcode 0214
目录 ✅ 965. 单值二叉树 描述 解答 c++ updated dfs c++ py py 生成器 ✅ 762. 二进制表示中质数个计算置位 描述 解答 cpp other cpp mine ja ...
- .hpp 文件
.hpp 是 Header Plus Plus 的简写,是 C++程序头文件. 其实质就是将.cpp的实现代码混入.h头文件当中,定义与实现都包含在同一文件,则该类的调用者只需要include该hpp ...
- centos610安装postgresql
1.安装仓储 安装仓库依赖: yum install https://download.postgresql.org/pub/repos/yum/reporpms/EL-6-x86_64/pgdg-r ...
- 集成PHP应用和SOLR
集成 PHP 应用和 Solr 搜索引擎 您的评价: 收藏该经验 你为什么需要搜索引擎?单纯数据库不够用?如果你只是创建小网站,数据库就够了.但当你创建中性或大型应用的时 ...
- 使用pandas读取excel
使用pandas读取excel Excel是微软的经典之作,在这里我们介绍使用Python的pandas数据分析包来解决此问题. pd.read_excel(io, sheet_name = 0, h ...
- js数组和java数组的区别
1,js数组可以自动扩容,不会出现数组越界的情况 2,js数组中可以存放任意数据类型 3,java数组一旦定义长度,不可以更改 4,java数组中的数据类型必须一致
- 2019年5月6日A股两百点暴跌行情思考
原因:特朗普推特发布贸易战消息 盘面:跳空低开,单边下跌,上证指数最大跌幅200点,收盘千股跌停 操作:开盘加仓,盘中加仓,尾盘满仓 总结: 特大黑天鹅事件爆发引发大盘暴跌时,后续必将迎来一个反弹机会 ...