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. WARNING: bridge-nf-call-iptables is disabled解决

    执行docker info出现如下警告 WARNING: bridge-nf-call-iptables is disabledWARNING: bridge-nf-call-ip6tables is ...

  2. USER 指定当前用户,希望以某个已经建立好的用户来运行某个服务进程，不要使用 su 或者 sudo，这些都需要比较麻烦的配置，而且在 TTY 缺失的环境下经常出错。建议使用 gosu

    USER 指定当前用户 格式:USER <用户名>[:<用户组>] USER 指令和 WORKDIR 相似,都是改变环境状态并影响以后的层.WORKDIR 是改变工作目录,US ...

  3. ArrayList的底层实现原理

    ArrayList源码分析 1.java.util.ArrayList<E> : List 接口的大小可变数组的实现类 ArrayList 内部基于 数组 存储 各个元素. 所谓大小可变数 ...

  4. Codeforces Round #592 (Div. 2)G（模拟）

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;long long a[1000007],b[ ...

  5. Atcoder Grand Contest 039B(思维，BFS)

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int col[207],s[207],n;c ...

  6. 5G时代开启，这些新兴职业决定你的后半生

    近段时间,高考志愿填报成为牵动千万家庭的头等大事.事实上,除了学校间的差距外,专业的优劣也在很大程度上决定着人们未来职场生涯的潜力.血淋淋的事实告诉我们,只有选对专业,才能让自己的人生实现升华,并避免 ...

  7. Nginx Rewrite域名及资源重定向!（重点）

    第一步:搭建Nginx服务 第二步:修改主配置文件 [root@ns2 ~]# vim /usr/local/nginx/conf/nginx.conf user  nginx nginx; work ...

  8. python输出颜色与样式的方法

    一.输出颜色与样式的方法 上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python ...

  9. urllib 库的代替品 requests 的用法

    Requuests 官方的介绍时多么的霸气,之所以那么霸气,是因为 Requestts 相比于 urllib 在使用方面上会让开发者感到更加的人性化.更加简洁.更加舒适,并且国外的一些公司也在使用re ...

  10. SpringBoot中普通类无法通过@Autowired自动注入Service、dao等bean解决方法

    无法注入原因: 有的时候我们有一些类并不想注入Spring容器中,有Spring容器实例化,但是我们又想使用Spring容器中的一些对象,所以就只能借助工具类来获取了 工具类: package com ...