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= ...
随机推荐
- zk集群部署
一.环境准备 当前环境:centos7.3三台软件版本:zookeeper-3.5.2部署目录:/usr/local/zookeeper启动端口:2181配置文件:/usr/local/zookeep ...
- LODOP纸张/打印机/份数/打印方向/双面打印 简短问答
纸张#如何设置纸张纸张设置,参考样例5 http://www.c-lodop.com/demolist/PrintSample5.html纸张的一些优先级 http://www.c-lodop.com ...
- python json dumps datetime类型报错
# -*- coding: utf-8 -*- import json from datetime import date, datetime class MyEncoder(json.JSONEnc ...
- 【Java语言特性学习之一】设计模式
设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...
- git删除远程.idea目录
git删除远程.idea目录 1. 登录 Administrator@USER-20180708AB MINGW32 / (master) $ git config --global user.nam ...
- （转）面试前必知Redis面试题—缓存雪崩+穿透+缓存与数据库双写一致问题
背景:redis问题在面试过程中经常被问到,对于常见问题一定不能放过. 面试前必知Redis面试题—缓存雪崩+穿透+缓存与数据库双写一致问题 一.缓存雪崩 1.1什么是缓存雪崩? 如果缓存数据设置的过 ...
- idea2019.2激活码到2020.7.1【已失效】，有另外的
ZKVVPH4MIO-eyJsaWNlbnNlSWQiOiJaS1ZWUEg0TUlPIiwibGljZW5zZWVOYW1lIjoi5o6I5p2D5Luj55CG5ZWGIGh0dHA6Ly9pZ ...
- 92. 反转链表 II
反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明: 1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m ...
- html5 iframe
html5 iframe元素:用于在网页中嵌入另一个页面,或嵌入视频 可替换元素 显示内容取决于元素属性 css不能完全控制其中样式 通常是行内块盒子 <a href="" ...
- wait(),notify(),notifyAll()必须加锁的原因
从语义方面解析为什么需要锁: 1.wait()方法会释放锁,如果没有先获得锁,那么如何释放? 从实际的作用: 为了预防饥饿线程的产生. 原因: // 线程A 的代码 while(!condition) ...