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(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
随机推荐
- 16 Z变换
Z变换 由于\(DTFT\)变换是有收敛条件的,并且其收敛条件比较严格,很多信号不能够满足条件,为了有效的分析信号,需要放宽收敛的条件,引入\(Z\)变换. 定义 已知序列的\(DTFT\)为 \[ ...
- Halcon blob分析基本处理步骤
Halcon,blob分析 应用场景,二值化后的灰度图像对比度清晰 基本处理流程 1 读取图片 read_image(变量名,'路径') //halcon字符串使用单引号'' 2 预处理 2.1 RO ...
- 【代码总结】PHP之会话跟踪技术
有些时候感觉自己学习的效率好低,一套教程一本书,反复听,反复看,反复敲代码.自学这条路真的是很艰难,在任何事情都没有成功之前都很枯燥乏味.自学的过程中总会遇到很多问题,有时候连错误的原因都找不出来,那 ...
- Kubernetes的控制器之Deployment的定义
Deploy 的控制器定义参数介绍 [root@master manifests]# kubectl explain deploy KIND: Deployment VERSION: extensio ...
- 阿里云虚拟主机申请免费SSL证书并成功开通Https访问
参考文档网址 https://baijiahao.baidu.com/s?id=1628343140232374972&wfr=spider&for=pc
- MAC系统 - 基础知识
一.基础操作 设置:触控板设置 - >学习具体手势 手势:MacBook Pro手势大全必学手势触控板手势有哪些 左键,右键,滑屏,切换到应用... 一指操作: 一指敲击:鼠标左键: 一指按下: ...
- 杭电 1059 Dividing
Dividing Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- Centos7618安装Docker
本文基于Centos7.6.18进行安装与测试 移除旧的版本: $ sudo yum remove docker \ docker-client \ docker-client-latest \ do ...
- 如何优雅的使用python中的代码注释
在编写代码时,确保您的代码易于被其他人理解时很重要的,给变量,函数起合适的名字以及合理的组织代码都是很好的方法. 使用代码注释时增加代码可读性的另一种方便简单且重要的方法! 1.为什么代码注释如此重要 ...
- pytest框架，使用print在控制台输入
代码示例: import pytest@pytest.fixture(autouse=True,scope='session') #autouse=True,scope='session'def se ...