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. JavaScirpt - 模块的写法

    传送门 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 原始写法 function f1() { // do sth. ...

  2. Git - 常用命令, cheatsheet

    git init git add <filename1> <filename2> git add . git checkout -- <filename> git ...

  3. navicat for mysql 中文破解版（无需激活码）

    1.下载破解版Navicat for MySQ中文破解版 链接: https://pan.baidu.com/s/19BlJRx7tLnDPIM4U6DNWvA 提取码: d9ci 2.解压下载后的文 ...

  4. jquery中for循环

    1.循环遍历标签 //定义数组 var imagesPath=[]; //循环遍历对象 $("#uploadList li img").each(function(){ image ...

  5. Servlet 学习（四）

    HTTP 响应的构成1.HTTP 响应行: 协议.状态.描述 HTTP 1.1 中定义的状态代码 100-199 是信息性代码,标示客户应该采取的其它动作 200-299 表示请求成功 300-399 ...

  6. 吴裕雄--天生自然 JAVA开发学习：java使用Eclipel连接数据库

    1:jar可到Mysql官网下载:地址Mysql 连接jar包.:https://dev.mysql.com/downloads/connector/j/如图,在下拉列表框中选择Platform In ...

  7. luogu P2704 炮兵阵地(经典状态压缩DP)

    方格有m*n个格子,一共有2^(m+n)种排列,很显然不能使用暴力法,因而选用动态规划求解. 求解DP问题一般有3步,即定义出一个状态 求出状态转移方程 再用算法实现.多数DP题难youguan点在于 ...

  8. Spring注解@Qualifier、@Autowired、@Primary

    @Qualifier 1.当一个接口有多个实现类,且均已注入到Spring容器中了,使用@AutoWired是byType的,而这些实现类类型都相同,此时就需要使用@Qualifier明确指定使用那个 ...

  9. c3p0 获取数据源

    getDataSourcec3p0Resource private static void f3Resource() throws Exception { Connection conn = getD ...

  10. 基本使用-ElasticSearch

    基本使用-ElasticSearch 说明:本篇文章主要是通过springboot整合es的基本使用基础,详细了解的可以看我上一篇文章:全文搜索-ElasticSearch 有朋友私信我上一篇没有环境 ...