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的更多相关文章

  1. Techparty-广州Javascript技术专场（学习分享）

    上周末(2016/07/31)去了一个技术沙龙学习前端相关的东西,下面是各个主题我印象比较深的. React + Redux 最佳实践 主题:本次分享,主要从React/Redux相关概念及其工具链, ...

  2. React-Reflux 基础分享

    因工作需要使用 React + Reflux 开发,最近几天都在努力学习着,特别是 Reflux,在网上查找的许多资料和 github 上的文档年代都有点久远,JavaScript 按照目前的节奏,更 ...

  3. .net点选验证码实现思路分享

    哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...

  4. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  5. 【分享】标准springMVC+mybatis项目maven搭建最精简教程

    文章由来:公司有个实习同学需要做毕业设计,不会搭建环境,我就代劳了,顺便分享给刚入门的小伙伴,我是自学的JAVA,所以我懂的.... (大图直接观看显示很模糊,请在图片上点击右键然后在新窗口打开看) ...

  6. 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

    前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...

  7. 分享一个SQLSERVER脚本（计算数据库中各个表的数据量和每行记录所占用空间）

    分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间) 很多时候我们都需要计算数据库中各个表的数据量和每行记录所占用空间 这里共享一个脚本 CREATE TABLE #tab ...

  8. 干货分享：SQLSERVER使用裸设备

    干货分享:SQLSERVER使用裸设备 这篇文章也适合ORACLE DBA和MYSQL DBA 阅读 裸设备适用于Linux和Windows 在ORACLE和MYSQL里也是支持裸设备的!! 介绍 大 ...

  9. Java8实战分享

    虽然很多人已经使用了JDK8,看到不少代码,貌似大家对于Java语言or SDK的使用看起来还是停留在7甚至6. Java8在流式 or 链式处理,并发 or 并行方面增强了很多,函数式的风格使代码可 ...

随机推荐

  1. 【题解】Luogu P5360 [SDOI2019]世界地图

    原题传送门 每次查询的实际就是将地图的一个前缀和一个后缀合并后的图的最小生成树边权和 我们要预处理每个前缀和后缀的最小生成树 实际求前缀和(后缀和)的过程珂以理解为上一个前缀和这一列的最小生成树进行合 ...

  2. Java11新特性 - 标准Java异步HTTP客户端

    Java9开始引入的一个处理 HTTP 请求的的 HTTP Client API,该 API 支持同步和异步,而在 Java 11 中已经为正式可用状态,你可以在 java.net 包中找到这个 AP ...

  3. Java核心技术梳理-IO

    一.引言 IO(输入/输出),输入是指允许程序读取外部数据(包括来自磁盘.光盘等存储设备的数据).用户输入数据.输出是指允许程序记录运行状态,将程序数据输出到磁盘.光盘等存储设备中. IO的主要内容包 ...

  4. HTML页面导出PDF——高清版

    需要做一个导出PDF的功能,网上找有很多,但是一般导出来的都是比较模糊的那种,下面这个是高清版的,导出的PDF都是几M,跟正常手动导出的差不多,很清晰. 首先用到的JS有: <script ty ...

  5. java之mybatis之模糊查询

    1.在 mybatis 中,模糊查询可以有以下方式 (1).第一种,直接将封装好的条件传给 sql 语句 <select id="findByName" parameterT ...

  6. python爬虫-有道翻译-js加密破解

    有道翻译-js加密破解 这是本地爬取的网址:http://fanyi.youdao.com/ 一.分析请求 我们在页面中输入:水果,翻译后的英文就是:fruit.请求携带的参数有很多,先将参数数据保存 ...

  7. Java自学-控制流程 If

    Java的 If 条件语句 条件判断 示例 1 : if if(表达式1){ 表达式2: } 如果表达式1的值是true, 就执行表达式2 public class HelloWorld { publ ...

  8. Weak Session IDs

    工具的使用 首先github上下载火狐插件(正版收费),按F12调用 服务器生成sessionID通过response返回给浏览器,sessionID存放在浏览器cookie中,然后再通过cookie ...

  9. 将windows共享文件夹挂载到Linux

    今天想用docker部署下 .net core的 服务,需要把代码文件从windows传到linux,以前一直都是拖拽的,这次安装的系统没有图形界面, 所以到网上找到了下面的这种方法,将共享文件夹挂载 ...

  10. 创建图 figure & figcaption

    如报纸.杂志.报告等其他媒介上看到过图.通常,图是由页面上的文本引述出. 在HTML5出现之前,没有专门实现这个目的的元素,因此一些开发人员想出了他们自己的解决办法(通常会使用不那么理想的.没有语义的 ...