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. Linux 服务器管理建议

    Linux 服务器管理建议 一.学习Linux 的注意事项 Linux 严格区分大小写 Linux 一切皆文件 Linux 不靠扩展名区分文件类型 靠权限位标识来确定的 特殊文件要求写扩展名(给管理员 ...

  2. NOI2019 退役记

    最终还是在意料之中退役了. 总的来说,这一年确实曲折坎坷,曾踏足山巅,也曾陷入低谷,二者都让我受益良多. 没有太多不甘,水平已经正常发挥,哪敢还有一丝奢求. 省选时其实已经早就做好退役的准备了,但命运 ...

  3. C ProcessAsUser

    class Interop { public static void CreateProcess(string app, string path) { bool result; IntPtr hTok ...

  4. JavaScript insertAdjacentHTML（）的使用

    含义: insertAdjacentHTML() 将指定的文本解析为HTML或XML,并将结果节点插入到DOM树中的指定位置.它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素.这避免了额 ...

  5. Vue学习之webpack调用第三方loader(十五）

    ---恢复内容开始--- 一.webpack 默认只能打包处理 JS 类型的文件,无法处理 其他的非  JS 类型的文件: 如果非要处理 非 JS 类型的文件,我们需要手动安装一些 合适 第三方 lo ...

  6. Iris Network Traffic Analyzer嗅探器

    网卡配置 ftp测试

  7. PHP实现财务审核通过后返现金额到客户

    应用场景: 有这么一个返现的系统,当前端客户发起提现的时候,后端就要通过审核这笔返现订单,才可以返现到客户的账号里. 来看看下面的截图 这里的业务场景就是经过两轮审核:销售审核,财务审核都通过后,后端 ...

  8. eclipse svn 提交、更新报错

    问题描述: svn: Unable to connect to a repository at URL 'https://test.com/svn/clouds/trunk/fire_Alarm'sv ...

  9. jQuery 页面加载后执行的事件(3 种方式)

    刚刚工作,没怎么用过 jQuery.今天在工作中遇到一个 jQuery 问题,页面加载的时候需要触发函数,第一直觉告诉我应该写成 onload(),结果不是.后来查了文档发现是 load(),但是版本 ...

  10. python变量的内存机制

    python变量的内存机制 作为一门简单易用的语言,且配备海量的库,python可谓是程序员手中的掌中宝,编程本身就是一种将人类思维转化为计算机思维的技术,如果不需要去追求极致的运行效率同时又不限制于 ...