DOM笔记1-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）

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.gif";
console.log(img)

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

事件三要素

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

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

事件源：图片

事件名称：点击 click

事件处理程序：图片变了

1.行内式

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.gif" onclick="事件处理程序"></img>

2.内嵌式（主流）

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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：获取和设置标签中的内容，设置的内容会被当成普通的文本（有兼容性问题）
封装兼容性。