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= ...
随机推荐
- openresty开发系列33--openresty执行流程之3重写rewrite和重定向
openresty开发系列33--openresty执行流程之3重写rewrite和重定向 重写rewrite阶段 1)重定向2)内部,伪静态 先介绍一下if,rewrite指令 一)if指令语法:i ...
- 【Log】logback实现每个类和包自定义级别输出
本例想实现对类或者包中的日志,自定义级别输出 方法一 1.自定义日志级别方式如下: 代码文件:Logger monitorLogger = LoggerFactory.getLogger(" ...
- iOS UILabel文字自适应高度自适应
第一步:创建UILabel对象,并设置一些基本设置 UILabel *label = [[UILabel alloc] init]; label.text = @"8月29日,在雅加达亚运会 ...
- MUD游戏开发教程视频
MUD游戏开发教程视频 https://space.bilibili.com/476328540/channel/detail?cid=91187
- [LeetCode] 247. Strobogrammatic Number II 对称数II
A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...
- [LeetCode] 325. Maximum Size Subarray Sum Equals k 和等于k的最长子数组
Given an array nums and a target value k, find the maximum length of a subarray that sums to k. If t ...
- OpenSSL 创建自签名证书
1.生成服务器私钥 openssl genrsa -out client.key 4096 2.生成证书签名请求(CSR) openssl req -new -key client.key -ou ...
- Python 内置函数--super()
描述 super() 函数是用于调用父类(超类)的一个方法. super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是如果使用多继承,会涉及到查找顺序(MRO).重复 ...
- php_mvc实现步骤六
shop34-1-目录布局 存在项目的根目录 shop34 框架代码与应用程序代码划分 框架代码: 在各个应用程序间可以通用的代码. 应用程序代码: 当前项目的业务逻辑实现的代码. 分别创建两个子目录 ...
- [转帖]keepalived工作原理和配置、使用
keepalived工作原理和配置.使用 https://www.iteye.com/blog/aoyouzi-2288124 keepalived是什么 keepalived是集群管理中保证集群高可 ...