jsDOM分享1
java scrip-DOM概念分享
在java script中有三大核心分别为：javascript语法，DOM,BOM.
今天分享一下在学习dom后的一些理解，希望大家支持。
绑定事件
之前学习过一个鼠标单击事件，onclick
var btn = document.getElementById("btn");
//获取网页元素
btn.onclick = function(){
//触发事件}
____//此处写入发生事件产生的结果
以上按里还有另外一种写法，就是将事件处理函数写在网页元素里面。
<button onclick = "fn1()">点击</button>
function fn1(){
//事件的结果
}
//这类写法的好处就是不需要在js中重新获取网页元素。
在js中除了上述的绑定事件意外，还可以采用事件监听的形式来经行时间的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>DOM事件绑定</h1>
<hr>
<button id="btn">点击</button>
</body>
<script>
function fn1() {
alert(123);
}
var btn = document.getElementById("btn");
//获取点击按钮
btn.addEventListener('click',fn1);
//绑定监听事件
</script>
</html>
以上案例虽然可以达到和onclick一样的效果，但是通过事件监听可以给一个元素绑定多个事件处理函数，并且触发事件后多个处理函数都会执行
事件监听并不支持ie9一下，为了完成兼容可以书写条件注释，或者采用attachEvent（）方法。
demo：
if(btn.addEventlistener){
btn.addEventlistener("click",fn);
}else{
btn.attachEvent("onclick",fn);
}
当然为了以后方便使用也可以将内容封装成函数：
function bindEvent(dom,event,fn){
if(dom.addEventListener){
dom.addEventListener(event,fn)};
}
else if(dom.attachEvent){
dom.attachEvent("on" + event,fn);
}else {
console.log("对不起，您的浏览器不支持。");
}
}
给一组元素绑定事件，先找到父元素，再通过父元素找到子元素的标签。通过for循环以此对li标签经行附加属性
ul
li li
li li
li li
ul
//投个懒理解下
var lis = document.getElementById('list').getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
//因为获取的li标签是无法单独设置属性
lis[i].onclick = function (){
通过for循环，找到对应的键值然后再给每个不同的键值的元素增加属性
this.style.background = 'red';
}
}
节点
节点，dom中最小的组成单位就是节点，再html中也被称为标签。文档的结构分为父级，子级，兄弟级。从最高的documen顶层节点向下就像一颗树，也被称之为dom树。
通常标签分为以下几类
- document ：整个文档树的顶层节点。老大哥级别
- documentType：doctype标签（比如文档声明头）
- Element：网页的各种html标签；
- Attribute ：网页元素的属性（比如class = “test”）
- text：标签之间或者标签包含的文本，！！空格换行也算。
- comment：注释
- documentFragment：文档的片段
节点树
文档树最上层节点为document节点。
文档第一层有两个节点，一个是文档声明头，（doctpye。。。）第二个就是html顶层容器html标签。html构成了网页树结构的根节点，（root node），其他html标签节点都是他的下级节点。一人之下万人之上。
根节点之下节点有三种层级关系
父节点关系（parentNode）：直接的那个上级节点
子节点（childNode）：父节点直接的下级节点。
//子节点包括选择性子节点（first/lastchildNode）同级节点关系（silbing）：另一个节点的父节点与之相同的节点。
以上节点的判断类似于css的选择器判断。
jsDOM分享1的更多相关文章
- Techparty-广州Javascript技术专场（学习分享）
上周末(2016/07/31)去了一个技术沙龙学习前端相关的东西,下面是各个主题我印象比较深的. React + Redux 最佳实践 主题:本次分享,主要从React/Redux相关概念及其工具链, ...
- React-Reflux 基础分享
因工作需要使用 React + Reflux 开发,最近几天都在努力学习着,特别是 Reflux,在网上查找的许多资料和 github 上的文档年代都有点久远,JavaScript 按照目前的节奏,更 ...
- .net点选验证码实现思路分享
哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...
- Hangfire项目实践分享
Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...
- 【分享】标准springMVC+mybatis项目maven搭建最精简教程
文章由来:公司有个实习同学需要做毕业设计,不会搭建环境,我就代劳了,顺便分享给刚入门的小伙伴,我是自学的JAVA,所以我懂的.... (大图直接观看显示很模糊,请在图片上点击右键然后在新窗口打开看) ...
- 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付
前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...
- 分享一个SQLSERVER脚本（计算数据库中各个表的数据量和每行记录所占用空间）
分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间) 很多时候我们都需要计算数据库中各个表的数据量和每行记录所占用空间 这里共享一个脚本 CREATE TABLE #tab ...
- 干货分享：SQLSERVER使用裸设备
干货分享:SQLSERVER使用裸设备 这篇文章也适合ORACLE DBA和MYSQL DBA 阅读 裸设备适用于Linux和Windows 在ORACLE和MYSQL里也是支持裸设备的!! 介绍 大 ...
- Java8实战分享
虽然很多人已经使用了JDK8,看到不少代码,貌似大家对于Java语言or SDK的使用看起来还是停留在7甚至6. Java8在流式 or 链式处理,并发 or 并行方面增强了很多,函数式的风格使代码可 ...
随机推荐
- SQL Server日志处理及安全访问
1.点SQL SERVER错误日志,右键,配置,限定错误日志的数目,比如6个 限制日志增长数量 2.然后运行命令: EXEC sp_cycle_errorlog ; 这个命令的作用是将当前日志归档,然 ...
- 全栈项目|小书架|微信小程序-书籍详情功能实现
效果图 实现分析 从效果图上分析,书籍详情是通过点击首页的item后进入. 进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口. 点击登录之后即可加载出用户评 ...
- VMware学习笔记之在虚拟机中使用Ghost系统盘安装xp黑屏卡在光标闪无法进入系统
使用ghost安装后,无法进入系统,卡在光标闪动,请参考如下: https://www.cnblogs.com/mq0036/p/3588058.html https://wenku.baidu.co ...
- 接口的鉴权cookie、session和token
1.HTTP是无状态协议 什么是无状态?就是说这一次的请求和上一次的请求是没有任何关系的,无法共享信息.好处就是速度快. 2.cookie.session的加入 HTTP请求是无状态的,所以解决共享信 ...
- Tensorflow在python3.7版本的运行
安装tensorflow pip install tensorflow==1.13.1 -i https://pypi.tuna.tsinghua.edu.cn/simple 可以在命令行 或者在py ...
- 2019 快乐阳光java面试笔试题 （含面试题解析）
本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.快乐阳光等公司offer,岗位是Java后端开发,最终选择去了快乐阳光. 面试了很多家公司,感觉大部分公司考察的点 ...
- Weak Session IDs
工具的使用 首先github上下载火狐插件(正版收费),按F12调用 服务器生成sessionID通过response返回给浏览器,sessionID存放在浏览器cookie中,然后再通过cookie ...
- guava使用
对于Guava Cache本身就不多做介绍了,一个非常好用的本地cache lib,可以完全取代自己手动维护ConcurrentHashMap. 背景 目前需要开发一个接口I,对性能要求有非常高的要求 ...
- fileinput 配置项大全，从源码中翻出了很多属性，没那么多时间一一验证，特发出来给大家参考参考
fileinput 配置项大全,从源码中翻出了很多属性,没那么多时间一一验证,特发出来给大家参考参考 fileinput 配置项大全 option 属性名 属性类型 描述说明 默认值 language ...
- JS-练习题
1.foo()结果 function foo() { bar.apply(null, arguments); } function bar(){ console.log(arguments); } f ...