昼猫笔记--什么是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>
昼猫笔记
最新文章
- cin的使用问题
- UDS(ISO14229-2006) 汉译(No.4 术语和缩写)
- OC基础--Property
- JAVA学习心得
- sqoop
- .NET Expression Tree
- WPF中文字体问题
- android 定制自己的日志工具
- (转)浅谈.NET下的多线程和并行计算(一)前言
- PHP图像操作:3D图、缩放、旋转、裁剪、添加水印(三)
- mac磁盘满解决方案
- HDU 1718 Rank counting sort解法
- Android 常见adb命令
- framework not found -fno-arc编译错误
- [Swift]LeetCode137. 只出现一次的数字 II | Single Number II
- javascript中字符串的方法
- LOJ.2585.[APIO2018]新家(二分 线段树 堆)
- Light OJ 1296:Again Stone Game(SG函数打表找规律)
- 2019.02.09 bzoj2440: [中山市选2011]完全平方数(二分答案+容斥原理)
- 含参变量积分-Leibniz法则