DOM

DOM: 文档对象模型（Document Object Model），又称为文档树模型。是一套操作HTML和XML文档的API。

DOM可以把HTML和XML描述为一个文档树。树上的每一个分支都可以视为一个对象，通过DOM可以添加、修改和移除文档上的某一部分。

DOM的相关概念

  • DOM就是把HTML视为一个层次结构（树形结构）的文档

  • 文档（Document）：就是指HTML或者XML文件

  • 节点（Node）：HTML文档中的所有内容都可以称之为节点

  • 元素（Element）：HTML文档中的标签可以称之为元素

  • 文档元素（根元素）：文档的第一个元素，HTML文档元素就是<html>

  • 文本节点

  • 属性节点

  • 父节 点 parent

  • 子节点 child

  • 兄弟节点 silbing

DOM可以做什么

  • 找对象（元素）
  • 设置元素的属性
  • 设置元素的样式
  • 动态创建和删除元素
  • 事件--触发响应
    • 事件源（事件的触发者）
    • 事件名称
    • 事件响应程序

DOM初体验

<a onclick="alert('aaa'); return false"></a> 取消a标签的默认行为。

找到id是link1的dom对象（a标签）

要等到标签生成之后，再来获取对应的dom对象。所以要注意<script>在文档中的位置。

  1. var link1 = document.getElementById("link1");
  3. //给link1注册单击事件
  4. //事件的三要素
  5. 	//事件源--事件的触发者link1
  6. 	//事件处理程序--onclick == 匿名函数
  7. 	//事件名称 click
  9. link1.onclick = function(){
  10. 	alert("hahah");
  11. 	//取消a标签默认行为的执行
  12. 	return false;
  13. }

给a标签注册多个事件

  1. //1 能够点击
  2. 	//获取页面上的a标签
  3. 	document.getElementById();
  5. 	var links =document.getElementsByTagName();
  6. 	for (var i = 0; i<links.length;i++){
  7. 		var link =links[i]; //获取每一个a标签
  8. 		//给link对象注册时间
  9. 		link.onclick = function(){
  11. 			//....
  12. 			//获取 要改变的dom元素对象
  13. 			//获取 要改变的动作
  14. 			//替换 
  16. 			//取消a的默认行为
  17. 			return false;
  18. 		}
  19. 	}

javascript_19-DOM初体验的更多相关文章

  1. DOM初体验（绑定事件，监听事件）

    JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...

  2. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  3. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  4. 百度EChart3初体验

    由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...

  5. Knockout.js初体验

    前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...

  6. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  7. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  8. flutter初体验

    flutter初体验 和flutter斗争了两个周末,基本弄清楚了这个玩意的布局和一些常用组件了. 在flutter里面,所有东西都是组件Widget.我们像拼接积木一样拼接Widget,拼接的关键词 ...

  9. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

随机推荐

  1. [E2E_L9]Linux命令行上传文件到百度网盘

    百度有2TB 存储空间,在有第三方服务器的情况下,很多东西不需要下载到本地,可以直接使用服务转存,这非常好. 系统环境: Linux 系统 + Python 2.7 安装软件工具:[可能会要重复装] ...

  2. MyBatis插入记录时返回主键id的方法

    有时候插入记录之后需要使用到插入记录的主键,通常是再查询一次来获取主键,但是MyBatis插入记录时可以设置成返回主键id,简化操作,方法大致有两种. 对应实体类: public class User ...

  3. [LeetCode] 236. Lowest Common Ancestor of a Binary Tree 二叉树的最近公共祖先

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  4. kexue shangwang002

    需先搭建 openvpn 海外服务端, 具体参考 https://www.cnblogs.com/weifeng1463/p/11041550.html 选择阿里云华东ecs 搭建openvpn 的客 ...

  5. svn密码找回

    TortoiseSVN Password Decrypterhttp://www.leapbeyond.com/ric/TSvnPD/点击打开链接去这个地址下载这个,然后直接运行,就可以看到你的use ...

  6. Activiti6.0流程编辑器汉化教程（en.json文件汉化）

    { "GENERAL": { "MAIN-TITLE": "Activiti", "ERROR": { "GE ...

  7. RAID磁盘阵列结构

    RAID磁盘阵列结构原理其实很简单,就是每块硬盘不插在主板的硬盘接口上了,而是全插在RAID卡上,然后RAID卡再插到主板上,由RAID卡统一管理硬盘,做各种RAID磁盘策略(RAID0,RAID1, ...

  8. (CSDN迁移)js中的判空

    <c:if test="${something.something == NaN}">style="display: none;"</c:if ...

  9. 三、Spring的@Scope设置组件作用域

    还是和上节一样,首先来看下配置类:MainConfig2 @Configuration 名 public class MainConfig2 { @Scope("singleton" ...

  10. java接入微信JS-SDK

    在微信公众号开发中不可,jssdk的接入虽然不是必须,但是根据业务需求我们还是可能用到,下面是自己整理的关于java接入的jssdk的方法,这里是记录关于接入微信JS-SDK的准备工作,关于接入JS- ...