Js 对Dom的操作

一、DOM的概述

DOM（Document Object Model，文档对象模型）描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。这使得JavaScript操作HTML，不是在操作字符串，而是在操作节点，极大地降低了编程难度。DOM对很多东西做了抽象，提供了丰富的API：取得元素、css样式、事件、运动、元素尺寸位置、节点操作。

二、获取HTMl标签元素

document.getElementById();        //通id获取一个标签元素

document.getElementsByTagName();  //通过标签名获取一组元素

get获取 element 元素 by通过 id就是id属性值。通过某个标签的id属性名获取这个元素

document.getElementById('box');

注意：

1、方法名称要用驼峰命名法，首个单词字母都是小写，后面的单词首字母都大写，其他小写。

2、方法需要通过参数获取元素，参数是标签的id属性值，必须写在引号内，不需要写#

3、获得元素的script标签，一定要在HTML元素位置后面，HTML有加载顺序，获取元素时，元素必须已经找到。

4、id不能重复，而且页面中如果设置表单元素的name属性，也不能与id同名。如果重复，只会选择第一个出现的。

三、操作HTML

多的是操作HTML标签属性。JS可以更改HTML任何属性，比如：src、href、title等。

操作方法：获得标签属性，更改标签属性。

第一种方法：点语法，获得和更改，通过元素对象打点调用方法。

第二种方法：通过getAttribute()获取、setAttribute()设置。需要用元素对象打点调用方法。

class这个属性，要换成className，因为class是JS的保留字，所以不能用。除此之外还有：

class要写成 className

for   要写成 htmlFor

rowspan 要写成 rowSpan

colspan 要写成 colSpan

**************************************************************************************

getAttribute()   获取标签元素的属性

setAttribute()   设置标签元素的属性

<img src="img/2.jpg" alt="这是赵丽颖" title="女神！！！" width="300" id="timg">
<div zhujinlai="100" id="box"></div>
<script type="text/javascript">
    var oImg = document.getElementById('timg');
  var oBox = document.getElementById('box');
   oImg.setAttribute("src","img/3.jpg");  //设置图片的src属性值7
   alert(oImg.getAttribute("src"));  //获取图片的src属性值
   //完全等价于
   //oImg.src = "img/3.jpg";
    alert(oBox.zhujinlai); //undefined 自定义属性，不是w3c的属性，所以不能用点语法
    alert(oBox.getAttribute("zhujinlai")); //自定义属性需要用getAttribute()方法获取

setAttribute和点语法的区别：

1.所有自定义属性，都不能通过点语法设置

<div zhujinlai="100" id="box"></div>
alert(oBox.zhujinlai); //undefined 自定义属性，不是w3c的属性，所以不能用点语法
alert(oBox.getAttribute("zhujinlai")); //自定义属性需要用getAttribute()方法获取

2.所有的行内样式，点语法.style得到是一个样式对象。我们可以通过.style.background继续得到小样式。但是getAttribute()得到的是字符串。

console.log(oBox.style); //object
console.log(typeof oBox.style); //object
console.log(oBox.getAttribute("style")); //string
console.log(typeof oBox.getAttribute("style")); //string

3.getAttibute()不需要避讳，直接：

oBox.getAttribute("width");
setAttribute('width','200px'); //只能设置一种属性值，不能设置多次

四、操作css

获取CSS属性：如果单一属性直接写点语法调用对应的属性名，如果是复合属性，必须用驼峰命名法：

oBox.style.backgroundColor = "skyblue"; 

五、事件监听

事件分为三要素：

1、事件源：就是这个事件的源头

2、事件类型：指的是事件什么发生（点击、触摸）

3、执行指令：匿名函数function(){}

事件源.事件类型 = function(){

执行的指令都写在这

}

常见的事件类型：

onclick         鼠标单击事件

ondblclick      鼠标双击事件

onmouseover     鼠标移入事件

onmouseout      鼠标移出事件

onmousedown     鼠标按下不松手事件

onmouseup       鼠标抬起事件

onfocus         获取焦点事件

onblur          失去焦点事件

onkeydown       键盘按下事件

onload          加载事件（某个元素加载完后，触发的事件）

window对象的加载事件，触发条件：所有的HTML和CSS加载完后，才触发。

特殊用途：帮我们实现事件函数内部的语句需要在HTML和CSS加载完后才执行JS

window.onload = function(){}

window  表示浏览器窗口

onload  表示网页都加载完后执行