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. es 搜索功能简介

    DSL 语法介绍 语法 范围 /_search 集群上搜索所有的索引 /index1/_search index1 /index1,index2/_search index1和index2 /inde ...

  2. jquery中 $(xxx).each() 和 $.each()的区别，以及enter键一键登录

    1.$().each 在dom处理上面用的较多.如果页面有多个input标签类型为text,对于这时用$().each来处理多个text,例如: $("input[type=’text’]& ...

  3. dubbo的dispatcher设置原理

    在上回<Dubbo源代码实现六>中我们已经了解到,对于Dubbo集群中的Provider角色,有IO线程池(默认无界)和业务处理线程池(默认200)两个线程池,所以当业务的并发比较高,或者 ...

  4. jmeter download historyList

    https://archive.apache.org/dist/jmeter/binaries/ 反馈,问题和评论应发送到Apache JMeter Users 邮件列表. 有关更多信息, 请访问Ap ...

  5. css不起作用报错：Resource interpreted as Stylesheet but transferred with MIME type text/html

    解决:https://blog.csdn.net/sky_cui/article/details/86703706 找了好久........

  6. Django 学习之Rest Framework 视图相关

    drf除了在数据序列化部分简写代码以外,还在视图中提供了简写操作.所以在django原有的django.views.View类基础上,drf封装了多个子类出来提供给我们使用. Django REST ...

  7. python知识点总结以及15道题的解析

    先看知识点总结 一.序列操作符x in s 如果x是列表s的元素,返回True,否则Falses + t 连接两个序列s和ts*n或者n*s 将序列s复制n次s[i] 返回s中第i元素s[i:j]或s ...

  8. Js判断值是否是NaN

    方法一:window.isNaN() 注意: window.isNaN 只对数值有效,如果传入其他值,会被先转成数值.比如,传入字符串的时候,字符串会被先转成NaN,所以最后返回true,这一点要特别 ...

  9. 最权威的json自定义格式

    1.封装result,作为返回的对象 public class Result<T> {        private int code;    private String msg;    ...

  10. scrapy 中 shell 出现 403 Forbiidden 解决方案

    版权声明本文来自:https://blog.csdn.net/qq_37462361/article/details/87860025 进入正题: 出现 403,表示网站拒绝提供服务 (因为很多网站都 ...