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>&nbsp;&nbsp;韩梅梅父母：</div>

        <div class="parents">

        	<div id="hanFather">&nbsp;&nbsp;&nbsp;&nbsp;父：韩小东</div>

        	<div>&nbsp;&nbsp;&nbsp;&nbsp;母：刘琼瑶</div>

        </div>

    </div>

    <div class="girls">刘晓玲</div>

    <div class="girls">乔宛如</div>

</body>

JS操作DOM节点查找的更多相关文章

  1. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  2. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  3. JS 操作Dom节点之样式

    为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...

  4. JS操作DOM节点大全

    1.Javascript删除节点 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法:parent. ...

  5. ionic+微信js-sdk集成初步融合，在子路由页引入js操作dom节点

    .controller('yaoheCtrl',['$scope',function ($scope) { $scope.$watch('$viewContentLoaded',function(ev ...

  6. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  7. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  8. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  9. 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

随机推荐

  1. 安装完 Ubuntu 16.04.1，重启出现[sda] Assuming drive cache: write through的问题

    重装了一下ubuntu,安装成功后重启出现了这个问题 刚开始以为是重启慢,就没在意这么多,可是我等了半个小时,(我特么的真闲,其实是忙别的忘了),还不行,咦,然后我就去找了找问题,哈哈哈哈 看图说话, ...

  2. C语言函数不能返回数组，但可以返回结构体

    为什么C语言函数可以返回结构体,却不可以返回数组?有这样的问题并不奇怪,因为C语言数组和结构体本质上都是管理一块内存,那为何编译器要区别对待二者呢? C语言函数为什么不能返回数组? 在C语言程序开发中 ...

  3. Kubernetes的pod控制器之DaemonSet

    DaemonSet 顶级参数介绍 [root@master manifests]# kubectl explain ds KIND: DaemonSet VERSION: extensions/v1b ...

  4. Executor、Executors、ExecutorService多线程操作

    Executor:一个接口,其定义了一个接收Runnable对象的方法executor,其方法签名为executor(Runnable command),该方法接收一个Runable实例,它用来执行一 ...

  5. 吴裕雄 python 神经网络——TensorFlow 数据集高层操作

    import tempfile import tensorflow as tf train_files = tf.train.match_filenames_once("E:\\output ...

  6. 进程作业管理2-kill,前后台作业,并行执行

    kill命令:向进程发送控制信号,以实现对进程管理,每个信号对应一个数字,信号名称以SIG开 头(可省略),不区分大小写 显示当前系统可用信号: kill –l   或者  trap -l 常用信号: ...

  7. TC301A芯片做的一种人体接近感应方案

    基于TC301A芯片做的一种人体接近感应方案,此方案的原理是通过检测电容的变化量来检测人体的有无,此方案设计原理简单,使用方便,容易操作,成本较低.设计方案如下:可根据原理图做pcb板子,如图芯片的五 ...

  8. Vue中全局监听键盘事件

    全局监听enter键,是把监听事件绑定到document上 常用的keyCode键盘编码在这里:https://www.cnblogs.com/wbyixx/p/12029508.html creat ...

  9. Python 中命令行参数解析工具 docopt 安装和应用

    什么是 docopt? 1.docopt 是一种 Python 编写的命令行执行脚本的交互语言. 它是一种语言! 它是一种语言! 它是一种语言! 2.使用这种语言可以在自己的脚本中,添加一些规则限制. ...

  10. python 中的生成器（generator）

    生成器不会吧结果保存在一个系列里,而是保存生成器的状态,在每次进行迭代时返回一个值,直到遇到StopTteration异常结束 1.生成器语法: 生成器表达式:通列表解析语法,只不过把列表解析的[] ...