Js 对Dom的操作

一、DOM的概述

DOMDocument 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任何属性,比如:srchreftitle等。

 

操作方法:获得标签属性,更改标签属性。

 

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

 

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

 

class这个属性,要换成className,因为classJS的保留字,所以不能用。除此之外还有:

 

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对象的加载事件,触发条件:所有的HTMLCSS加载完后,才触发。

 

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

 

 window.onload = function(){}

 

window  表示浏览器窗口

 

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

 

posted @ 2017-10-31 19:55  欢复  阅读(382)  评论(0编辑  收藏  举报