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初体验的更多相关文章

  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. java 库 pdfbox 将 pdf 文件转换成高清图片方法

    近期需要将 pdf 文件转成高清图片,使用库是 pdfbox.fontbox.可以使用 renderImageWithDPI 方法指定转换的清晰度,当然清晰度越高,转换需要的时间越长,转换出来的图片越 ...

  2. linux设置程序运行超时时间

    在某些情况下,我们需要限制程序的运行时间(比如cronjob等),这里简单介绍下使用信号及timeout的实现方法 1. 假如有如下代码(test_timout.sh): #!/bin/bash wh ...

  3. 【转载】 《Human-level concept learning through probabilistic program induction》阅读笔记

    原文地址: https://blog.csdn.net/ln1996/article/details/78459060 --------------------- 作者:lnn_csdn 来源:CSD ...

  4. 010-MySQL批量插入测试数据

    1.由于测试需要 需要将数据插入到百万级别,故需要使用循环语句,循环参看:009-MySQL循环while.repeat.loop使用 方式三.使用values批量插入[[推荐答案]] 基础格式 IN ...

  5. 一码学程 10284 排队找bug 题解 单调队列 或者 线段树RMQ

    注:只是看到题目,未评测,所以不确定代码正确性,但是算法思路没有问题 描述 同学们的bug还真是多啊,orz... 春节期间大家存下的bug都来找肖老师解决了. 每个人都有bug,但是肖老师却只有一个 ...

  6. kubernetes-subpath用法（把文件挂载在已存在的目录下，不覆盖原目录）

    以ngxin的配置文件为例子: nginx-deployment.yaml : apiVersion: v1 kind: ConfigMap metadata: name: nginx-cm data ...

  7. public interface ICloneable

    using System.Runtime.InteropServices; namespace System{ // // 摘要: // 支持克隆,即用与现有实例相同的值创建类的新实例. [ComVi ...

  8. mysql查看和修改最大连接数

    查看最大连接数 SHOW VARIABLES LIKE '%max_connections%'; 修改最大连接数 ;

  9. js玩命加载……

    在请求数据加载的过程中,经常需要显示请求等待,写了一个简单的请求等待—- html代码如下 <!--页面载入显示--> <div id="dataLoad" st ...

  10. springmvc的注解配置

    springmvc大大减少了对xml的配置,减少了配置量,以及可以在一个controller类中进行多个请求配置 一.springmvc配置 context:component-scan 开启包扫描, ...