1.什么是DOM？
简单来说，DOM是一套对文档的内容进行抽象和概念化的方法。
2.DOM 文档对象模型
理解相似于现实中的“世界对象模型”，比如“汽车”、“房子”、“树”等客观事物。
描述抽象概念：“左边第三栋房子”等
3.模型：DOM中的 M
- DOM中的M代表着 “Model”，但说它代表着 “Map”（地图）也未尝不可
- 都是某种事物的表现形式
- DOM代表着加载到浏览器窗口的当前网页，浏览器提供了网页的地图（或者模型）
- 而我们可以通过JavaScript取读取这张地图
4.节点树（家谱树）
- DOM把一份文档表示为一棵树（这里的树是数学意义上的概念）
- 家谱树本身又是一种模型，使用 parent（父）、child（子）、sibling（兄弟）等记号来表示家族成员之间的关系
<html>标签是树根，根元素，代表整个文档
5.节点
5.1 案例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>购物清单</title>
</head>
<body>
<h1>想要买什么？</h1>
<p title="提醒">不要忘记买这些东西</p>
<ul id="purchases">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
</html>
5.2 主要分类
- 元素节点
- 文本节点
- 属性节点
5.3 元素节点
- DOM的原子是元素节点（element node）
<body>、<p>、<div>之类的元素- 这些元素在文档中的布局形成了文档的结构
- 标签名字就是元素的名字
- 元素可以包含其他元素
<html>元素是我们节点树的根元素
5.4 文本节点
<p title="提醒">不要忘记买这些东西</p>- 在p标签中的 不要忘记买这些东西 ，它是一个文本节点
- 文本节点总是被包含在元素节点内部
- 但并非所有元素节点都有文本节点，如：
<ul>包含<li>
5.5 属性节点
- 属性节点是用来对元素做出更具体的描述
- 所有属性都被元素包含
- 几乎所有元素都有一个title属性
<p title="提醒">不要忘记买这些东西</p>
<ul id="purchases">- 其中的 id属性 和 title属性
6.CSS技术
6.1 继承
- 继承是CSS技术的一项强大功能
- 节点树上的各个元素将继承其父元素的样式属性
- 如：在body元素定义了一些颜色或字体，则包含在body元素里的所有元素豆浆自动获得那些样式
- 但：当只想让那些样式作用于某个特定元素时，则需要在文档里插入一些能把一段文本和其他段落区分开的特殊标志
- 为了把某一个或某几个元素和其他元素区别开来，需要使用class属性或id属性
6.2 class属性
- 可以在所有元素上任意应用class属性
- class属性值相同的所有元素定义同一种样式
6.3 id属性
- id属性是给网页里的某个元素加上一个独一无二的标识符
- 尽管id属性本身只能用一次，样式表还是可以利用id属性为包含在改特定元素中的其他元素定义样式
7.获取元素
7.1 三种方法获取元素
- 元素ID：
getElementById('id') - 标签名字：
getElementByTagName('tag') - 类名字：
getElementByClassName('class')
7.2 getElementById(id)
- document对象特有的函数
- 函数后面必须跟一对圆括号，括号里包含着函数参数
- id值必须放在单引号或者双引号里
- 调用将返回一个对象
- 文档中的每一个元素都是一个对象
7.3 getElementByTagName(‘tag’)
- 返回的是一个对象组，也就是数组
- 即使这个标签只有一个元素，返回的也是数组
- 可以通过length属性查出这个数组里元素的个数
- 将
getElementById(id)和getElementByTagName('tag')连用
找到id属性值为 purchase 的元素包含着多少个列表项
var a = document.getElementById('purchase');
var items = a.getElementByTagName('*');//所有元素
7.4 getElementByClassName(‘class’)
- 通过class属性中的类名来访问元素
- 返回一个具有相同类名的数组
- 要指定多个类名，只要在字符串参数中用空格分隔类名即可
document.getElementByClassName('important sale') - 多类名时，元素要同时具有 important 和 sale 类名
- 顺序和更多其他的类名不重要
getElementById和getElementByClassName连用
在id属性为 purchase 的元素有多少类名包含 sale 的列表项
var a = document.getElementById('purchase');
var items = a.getElementByTagName('sale');//所有元素
8.获取和设置属性
8.1 getAttribute
- getAttribute是一个函数，它只有一个参数，查询的属性名字
- getAttribute方法不属于document对象，所以不能通过 document对象调用
- 只能通过元素节点对象调用
- 可以和 getElementTagName 连用
- 如：获取每个
<p>元素的title属性
var paras = document.getElementByTagName('p');
for(var i=0; i<paras.length;i++){
alert(paras[i].getAttribute('title'));
}
8.2 setAttribute
- 允许对属性节点值做出修改，只能作用于元素节点
object.setAttribute(attribute,value)- 如果这个 attribute（属性） 原本不存在，则：先创建这个属性，然后设置它的值
- 如果这个 attribute（属性） 原本存在，则：这个属性的值就会被覆盖掉
扫一扫
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
