JS操作DOM节点查找
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> 韩梅梅父母:</div>
<div class="parents">
<div id="hanFather"> 父:韩小东</div>
<div> 母:刘琼瑶</div>
</div>
</div>
<div class="girls">刘晓玲</div>
<div class="girls">乔宛如</div>
</body>
JS操作DOM节点查找的更多相关文章
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- JS 操作Dom节点之样式
为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...
- JS操作DOM节点大全
1.Javascript删除节点 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法:parent. ...
- ionic+微信js-sdk集成初步融合,在子路由页引入js操作dom节点
.controller('yaoheCtrl',['$scope',function ($scope) { $scope.$watch('$viewContentLoaded',function(ev ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 【JavaScript实用技巧(二)】Js操作DOM(由问题引发的文章改版,新人大佬都可)
[JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
随机推荐
- laravel 语言包拓展
laravel 使用make:auth生成用户认证,登录表单是英文版本的,打开模板文件(resources/views/auth/login.blade.php),此模板文件是我们刚刚使用 make: ...
- 20141110的alltosun面试
今天周一,是校招的第一天,心情有点紧张,不过可以和很多同学一起去,是我紧张的心情变得稍微安静些.面试进行的时候,是学长2哥面的我,总体感觉自己的表现很糟糕,在公共场合发表言论或者演讲,一直是我的一个弱 ...
- ElementUI el-table 表格 行选择框改为单选
实现方法 首先,表格加一列 <el-table-column type="selection" width="55"></el-table-c ...
- 利用graphviz软件和pycallgraph库自动生成Python代码函数调用关系图
参考博文:https://blog.csdn.net/qq_36408085/article/details/82952846 https://blog.csdn.net/fondax/article ...
- Mac终端ls颜色设置
mac自带的终端是款非常好用的ssh工具,但ls命令下文件与文件夹都是单一的颜色,为了更好区分,作出修改. 终端默认背景颜色为白色,(终端->偏好设置->描述文本),可修改背景颜色与字体大 ...
- python字符串操作方法详解
字符串 字符串序列用于表示和存储文本,python中字符串是不可变对象.字符串是一个有序的字符的集合,用于存储和表示基本的文本信息,一对单,双或三引号中间包含的内容称之为字符串.其中三引号可以由多 ...
- 3、gitlab备份与恢复
1.备份 #修改配置文件,启用备份 [root@localhost ~]# vim /etc/gitlab/gitlab.rb 377 gitlab_rails['backup_path'] = &q ...
- 02使用GitHub远程仓库
一.远程库配置 由于本地的GIT仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要以下配置: 1.创建SSH key 为什么GitHub需要SSHKey:根据key来授权,有哪些key可以往 ...
- 从数组A中删除在数组B中存在的元素,用C语言实现
从数组A中删除在数组B中存在的元素,用C语言实现 考验数组操作的能力,C语言的熟练程度. //功能:从数组A中删除在数组B中也存在的数据 //输入:arrA --- 数组A // lenA --- 数 ...
- 【转】十步让你成为一名优秀的Web开发人员
第一步:学好HTML HTML(超文本标记语言)是网页的核心,因此你首先应该学好它,不要害怕,HTML很容易学习的,但也很容易误用,学懂容易要学精还得费点功夫,但学好HTML是成为Web开发人员的基本 ...