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. yaml服务部署示例

    apiVersion: apps/v1kind: Deploymentmetadata:  name: igirl  namespace: chaolai  labels:    app: igirl ...

  2. tkinter学习（3）scale尺度条和menu菜单

    1.scale学习(尺度条)1.1 代码: #第1步:导出模块 import tkinter as tk #第2步:定义窗口,及其标题.大小和位置 win = tk.Tk() win.title('s ...

  3. 【原】Django常用命令总结

    1.终端命令 # 查看django版本 $ python -m django --version # 创建项目,名为mysite $ django-admin startproject mysite ...

  4. Java IO流详解（五）——缓冲流

    缓冲流也叫高效流,是处理流的一种,即是作用在流上的流.其目的就是加快读取和写入数据的速度. 缓冲流本身并没有IO功能,只是在别的流上加上缓冲效果从而提高了效率.当对文件或其他目标频繁读写或操作效率低, ...

  5. centos无法启动之fstab

    你可能由于对磁盘管理,修改了/etc/fstab文件,进行自动挂载,但是卸载磁盘后,忘记修改/etc/fstab文件,导致了如下启动linux错误,开启进入紧急模式 error getting aut ...

  6. 「JSOI2014」强连通图

    「JSOI2014」强连通图 传送门 第一问很显然就是最大的强连通分量的大小. 对于第二问,我们先把原图进行缩点,得到 \(\text{DAG}\) 后,统计出入度为零的点的个数和出度为零的点的个数, ...

  7. Vue系列(六)之常用指令v-model

    v-model 基本使用 修饰符 .trim .number .lazy 前面讲到的插值,其实都是单向绑定,数据变-->视图变.有些元素可以与用户交互,比如input,select等,那么我们希 ...

  8. 基于Goolgle最新NavigationDrawer实现全屏水平平移

    常见实现App 上面侧边栏菜单之前使用SlidingMenu,现在发现Goolgle原生NavigationDrawer也挺好用.但是细心的开发者们发现NavigationDrawer没有类似Slid ...

  9. [read -p应用]插拔光模块去检查port present状态

    #!/bin/bash path="/sys/devices/platform/soc/fd880000.i2c-pld/i2c-0/i2c-4/i2c-15/15-0060" a ...

  10. Spring Boot 2.x教程-Thymeleaf 原理是什么

    layout: post title: Spring Boot 2.x教程-Thymeleaf 原理是什么 categories: SpringBoot description: Spring Boo ...