DOM笔记1-DOM的基本概念@慕课网原创_慕课网

DOM的基本概念

什么是DOM？

DOM的作用：文档对象模型，用来操作页面中的元素；

DOM（document object model）：也叫作文档树模型，他是用来操作XML或者HTML的API；

什么是API？

API：应用编程接口，API是别人给我提供的一系列方法，我们只需要直接用就可以了。可以把API理解为“工具”；

什么是文档对象模型？

DOM把整个html文档里所有元素都封装成对象。

节点（node）：在DOM里面封装的这些对象，统称为节点。

标签节点
注释节点
属性节点
文本节点
等等

元素(element)：我们操作最多的是标签节点，称为元素。
文档对象（document）:整个html被封装成的对象称为文档对象。

文档树模型

树形结构的好处：能够很方便的找到父节点、子节点、兄弟节点。

父节点（parent）
子节点：（child children）
兄弟节点(sibling)

XML（了解）

可扩展性的标记语言

可以自定义标签
```
<student></student>
```
XML的用途：用作数据传输(现在主流用json）

DOM基本用法

通过id获得元素

<img src="images/1.gif"></img>

//通过document.getElementById找出这个元素；
var img=document.getElementById("img");

console.log(img);//以标签的形式打印；
console.dir(img);//以对象的形式打印；

//获取这些属性
console.log(img.id);
console.log(img.src);

//修改这些属性
img.src="2.gif";
console.log(img)

事件

事件：事件就是文档或者浏览器的某一个交互瞬间。

事件三要素

事件源
事件名称
事件处理程序

例：我点了图片，图片变了。

事件源：图片

事件名称：点击 click

事件处理程序：图片变了

注册事件的方式

1.行内式

<img src="images/1.gif" onclick="事件处理程序"></img>

2.内嵌式（主流）

<img src="images/1.gif" id="img"></img>

img.onclick = function(){
    var img = document.getElementById("img"); //找到元素；
    img.src = "2.jpg";    //更改图片路径;
}

给a标签注册事件

a标签的默认行为页面跳转，可以通过return false来阻止

通过标签名获取元素

var lis = document.getElementByTagName("li")

var ul = document.getElementById("ID名")
var lis = ul.getelementbytagname("li")

伪数组

返回的值是伪数组，哪怕只有一个元素返回的也是伪数组。必须通过[下标]才能取出来使用；

==在循环注册事件的时候，表示当前对象一定要用this==

常用属性

标签常用到的属性有：src、title、href、className

常用事件属性

on click：鼠标点击事件
on mouth over：鼠标经过事件
on moutu out：鼠标离开事件

标签内容

innerHTML：获取和设置标签中的内容，设置的内容会被当做节点对象解析到DOM树上。

innerText以及textContent：获取和设置标签中的内容，设置的内容会被当成普通的文本（有兼容性问题）
封装兼容性。