javascript_19-DOM初体验
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>在文档中的位置。
var link1 = document.getElementById("link1");
//给link1注册单击事件
//事件的三要素
//事件源--事件的触发者link1
//事件处理程序--onclick == 匿名函数
//事件名称 click
link1.onclick = function(){
alert("hahah");
//取消a标签默认行为的执行
return false;
}
给a标签注册多个事件
//1 能够点击
//获取页面上的a标签
document.getElementById();
var links =document.getElementsByTagName();
for (var i = 0; i<links.length;i++){
var link =links[i]; //获取每一个a标签
//给link对象注册时间
link.onclick = function(){
//....
//获取 要改变的dom元素对象
//获取 要改变的动作
//替换
//取消a的默认行为
return false;
}
}javascript_19-DOM初体验的更多相关文章
- DOM初体验（绑定事件，监听事件）
JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 【Knockout.js 学习体验之旅】（1）ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- 百度EChart3初体验
由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...
- Knockout.js初体验
前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- flutter初体验
flutter初体验 和flutter斗争了两个周末,基本弄清楚了这个玩意的布局和一些常用组件了. 在flutter里面,所有东西都是组件Widget.我们像拼接积木一样拼接Widget,拼接的关键词 ...
- angularJs初体验，实现双向数据绑定！使用体会：比较爽
使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...
随机推荐
- Laravel 入门常见问题汇总
一.安装完成后想打开 Laravel 内置的登录页面,报错 解决方法: Laravel 利用 PHP5.4 的新特性 trait 内置了非常完善好用的简单用户登录注册功能,适合一些不需要复杂用户权限管 ...
- matlab学习笔记8 基本绘图命令-初级二维绘图/交互式绘图
一起来学matlab-matlab学习笔记8 基本绘图命令_5 初级二维绘图/交互式绘图 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用&g ...
- oracle 中decode的用法
select decode(gg1.group_goods_amount, , , gg1.group_goods_amount) ; 这句话的意思是:如果group_goods_amount为0 则 ...
- springboot 整合mongodb
Mongodb Mongodb是为快速开发互联网Web应用而构建的数据库系统,其数据模型和持久化策略就是为了构建高读/写吞吐量和高自动灾备伸缩性的系统. 在pom.xml中添加相关依赖 <!-- ...
- [LeetCode] 141. Linked List Cycle 链表中的环
Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ext ...
- [LeetCode] 507. Perfect Number 完美数字
We define the Perfect Number is a positive integer that is equal to the sum of all its positive divi ...
- Jenkins - 参数化构建
1 - 设置 根据输入的参数来执行不同的构建过程. 参数TIME作为环境变量,可以被引用. 项目的首页会出现" Build with Parameters"功能链接,没有了&quo ...
- zabbix解决中文乱码
解决中文乱码 yum install -y wqy-microhei-fonts #解决方法 中文乱码 \cp /usr/share/fonts/wqy-microhei/wqy-microhei.t ...
- ehcache和redis的区别及适用场景
区别: (1)Redis 独立程序,是通过socket访问到缓存服务,效率比ecache低,比数据库要快很多,处理集群和分布式缓存方便,有成熟的方案 (2)Ehcache 直接在jvm虚拟机中缓存,速 ...
- 【视频开发】【Live555】通过live555实现H264 RTSP直播
前面的文章中介绍了<H264视频通过RTMP流直播>,下面将介绍一下如何将H264实时视频通过RTSP直播. 实现思路是将视频流发送给live555, 由live555来实现H264数据流 ...