昼猫笔记--什么是DOM
昼猫笔记--给你带来不一样的笔记
不止是笔记 更多的是思考
Hello,大家好,昼猫,今天来加深下DOM
什么DOM呢?它的全称叫
Document Object Model
通过全称可以知道它是
文档对象模型,通过DOM可以来任意来修改网页中各个内容
是不是很牛掰,通过学习它可以达到一些网页的特效
DOM简介
文档
文档指的是网页,一个网页就是一个文档
对象
对象指将网页中的每一个节点都转换为对象 , 转换完对象以后,就可以以一种纯面向对象的形式来操作网页了
模型
模型用来表示节点和节点之间的关系,方便操作页面
节点(Node)
节点是构成网页的最基本的单元,网页中的每一个部分都可以称为是一个节点
虽然都是节点,但是节点的类型却不同
常用的节点
文档节点 (Document),代表整个网页
元素节点(Element),代表网页中的标签
属性节点(Attribute),代表标签中的属性
文本节点(Text),代表网页中的文本内容
DOM操作
DOM查询
在网页中浏览器已经为我们提供了document对象
它代表的是整个网页,它是
window对象的属性,可以在页面中直接使用。
document查询方法
根据元素的id属性查询一个元素节点对象:
document.getElementById(id属性值);
根据元素的name属性值查询一组元素节点对象:
document.getElementsByName(name属性值);
根据标签名来查询一组元素节点对象:
document.getElementsByTagName(标签名);
元素的属性
读取元素的属性:
语法:元素.属性名
例子:
ele.
name
ele.
id
ele.
value
ele.
className
修改元素的属性: 语法:元素.属性名 = 属性值
innerHTML使用该属性可以获取或设置元素内部的HTML代码
事件Event
事件指的是用户和浏览器之间的交互行为。比如:
点击按钮、
关闭窗口、
鼠标移动...
我们可以为事件来绑定回调函数来响应事件。
绑定事件的方式:
1.可以在
标签的事件属性中设置相应的JS代码
<button onclick=js代码...>昼猫笔记</button>
2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
<button id=btn>按钮</button>
<script>
var btn = document.getElementById(btn);
btn.onclick = function(){
};
</script>
昼猫笔记
昼猫笔记--什么是DOM的更多相关文章
- 昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行?
本篇主要内容:异步.定时器引发的思考 预计阅读时间:8分钟 了解 我们都知道在js中定时器有两种 setInterval() . setTimeout() setInterval() :按 ...
- 昼猫笔记 JavaScript -- 作用域技巧!!
简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...
- 昼猫笔记 -- 面向对象(II) - 继承
继承 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念. 所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现,还有就是js可以 ...
- 昼猫笔记 JavaScript -- 面向对象(I)
本文内容搬运自公众号 原文链接 本文主要内容:面向对象 预计阅读时间:6分钟 面向对象的方式 单例模式(字面量定义) var obj = {} 类的实例 var obj = new Object() ...
- 昼猫笔记 JavaScript -- 闭包
本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...
- 昼猫笔记 从此告别复杂代码--JavaScript
昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...
- jQuery:自学笔记(3)——操作DOM
jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...
- Javascript学习笔记三——操作DOM(二)
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...
随机推荐
- rtmutex赏析
[摘要] rtmutex作为futex的底层实现,有两个比較重要的特性.一个是优先级继承,一个是死锁检測.本文对这两个特性的实现进行说明. 一.优先级继承 2007年火星探路者号的vxworks上发生 ...
- shell加法运算及i++
shell中不支持像普通c语言中的i++操作,默认都是字符串操作,但是通过以下几种方式可以进行变量的自增加 1.linux 用let 表示算术表达式 如下: i=0 let i +=1 或者 let ...
- Automation testing tool comparison - UFT & CodedUITest
Ease of Use - Recording and Playback Functionality UFT provides 4 models to record a new test. Norma ...
- MyBatis、JDBC、Hibernate区别
从层次上看,JDBC是较底层的持久层操作方式,而Hibernate和MyBatis都是在JDBC的基础上进行了封装使其更加方便程序员对持久层的操作. 从功能上看, JDBC就是简单的建立数据库连接,然 ...
- 增强for循环的使用详解及代码
首先说一下他的语法结构: for(数据类型 变量 :集合){ //这里写要遍历的元素,或者所需要的代码即可//如果集合中存放的是对象,可以获取到每个对象(数据类型=对象类型 变量(遍历出来的每个对象) ...
- 上传golang 版本SDK
在上传的时候,文件都上传成功了,但是返回的信息里面errcode 404 token 是"".是不是因为我的callbackUrl(随便写的) 写错导致的. 上传golang 版本 ...
- 查询SqlServer最近执行过的Sql
SELECT TOP 1000ST.text AS '执行的SQL语句' ,QS.execution_count AS '执行次数' ,QS.total_elapsed_time / 10000 AS ...
- C# fixed语句固定变量详解
相信很多人在这样或那样的项目中,或者无意间看到了fixed语句块,看到之后你肯定会疑问: 1,这个fixed关键字是做什么用的? 2,什么情况下需要该关键字? 3,这个关键字该怎么用? 我相信解决了上 ...
- Java 调用对象方法的执行过程
弄清调用对象方法的执行过程十分重要.下面是调用过程的详细描述: 1) 编译器查看对象的声明类型和方法名.假设调用x.f(param),且隐式参数x声明为C类的对象.需要注意的是:有可能存在多个名为f, ...
- [POI2012]HUR-Warehouse Store(贪心,堆)
题意 n天.第i天上午会进货Ai件商品,中午的时候会有顾客需要购买Bi件商品,可以选择满足顾客的要求,或是无视掉他. 如果要满足顾客的需求,就必须要有足够的库存.问最多能够满足多少个顾客的需求. (n ...