javascript系列-class9.DOM(上)

欢迎加入前端交流群交流知识获取视频资料：749539640

1.文档对象模型DOM（document Object Model） 

 

 

 

所谓DOM就是以家族的形式描述HTML       节点有 父子 兄弟 

 

注：在JavaScript里真的这么叫！！！只不过加上了节点两个字称作父子节点，兄弟节点。

 

 

 

 

1.选择器

 

1）getElementById( id ) 获取指定ID的元素；

 

有了几天的经验，对函数的运行顺序已经有了一个了解了。

 

window.onload=function( ){ }  这个事件，是在HTML文档全部加载结束之后才会执行的；

 

2）getElementsByTagName( ) 获取相同元素的节点列表，通过标签名选择元素。什么是标签名那？

 

（注意：记得有S）

 

例如：<div></div> <li></li><span></span>............HTML标签名；

 

返回值是一个数组，所以我们在用这个选择器选择东西的时候通常放在一个以a开头的变量里，方便在使用的时候知道这是一个数组；

 

例：

 

     aLi=document.getElementsByTagName( 标签名 )

 

     这时候aLi是一个数组，取值的时候用下表获取aLi[0];

 

     用console.log()查看获取的值；（清晰，简单直接）

 

3）getElementsByName( ) 通过Name值获取元素，返回值是数组，通常用来获取有name的input的值；

 

注：1*不是所有的标签都有name值；

      2*低版本的浏览器会有兼容问题；

 

4）getElementsByClassName() 通过class类名来获取元素，返回值是数组；

 

 

这个方法好用！这个方法赞！这个方法太好了！！

 

     JS缺德定律：好用的东西都不兼容；

 

     IE8以下该方法无法使用。

 

     拓展：兼容性的理解；

 

5）getAttribute( )获取元素的属性值，他是节点的方法！所以前缀必须是节点！

 

     document.getElementById( ID值 ).getAttribute( )

 

     什么事元素属性那？ class就是元素属性，写在标签内的所有东西都是标签属性， 比如link的href比如img的src....都是元素属性。

 

6）setAttribute( )设置元素的属性。同上；

 

     有些小小的兼容性问题，低版本IE不兼容；

 

7）removeAttribute( )删除属性；同上；

 

     兼容性问题同上；

 

8）children属性，获得DOM元素的所有子元素；返回值是数组

 

 

2.访问节点的属性；

 

1）tagName     返回值是当前元素的标签名；

 

2）innerHTML  返回值是当前元素的内容；                                         OK

 

3）id                返回值是当前元素的ID                                               OK

 

4) title              获取title标签值； 这个title是从Document中获取的；   OK

 

5)className    返回值是当前元素的Class                                           OK

 

细心的同学已经发现一个在有些属性后面，有一个OK存在；这个OK的意思就是即可获得，又可设置；

 

以左右值的概念来划分 ， 那么这些带有OK的属性是既能当左值也能当右值的。不带有OK的属性是只能当右值存在的；

 

概念OVER；

 

事件的另一种写法：

 

DOM.onclick=function(){

 

}

 

1.网页换肤

 

网页换肤.zip
48.9 KB

 

2.隔行变色；

 

隔行变色.html
1.0 KB

 

3.简易年历：

 

简易年历.html
3.0 KB

 

4.qq延时隐藏

 

QQ延时提示框.zip
119.4 KB

 

作业，表格的即时编辑；

 

表格即时编辑.html
1.1 KB