博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript系列-class9.DOM(上)
阅读量:5914 次
发布时间:2019-06-19

本文共 1446 字,大约阅读时间需要 4 分钟。

交流知识获取视频资料:

1.文档对象模型DOM(document Object Model) 
 
 
 
所谓DOM就是以家族的形式描述HTML       节点有 
父子 兄弟 
 
注:在JavaScript里真的这么叫!!!只不过加上了节点两个字称作父子节点,兄弟节点。
 
 
 
 
1.选择器
 
1)getElementById( id ) 获取指定ID的元素;
 
有了几天的经验,对函数的运行顺序已经有了一个了解了。
 
window.οnlοad=function( ){ }  这个事件,是在HTML文档全部加载结束之后才会执行的;
 
2)getElement
sByTagName( ) 获取相同元素的节点列表,通过标签名选择元素。什么是标签名那?
 
(注意:记得有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.οnclick=function(){
 
}
 
1.网页换肤
 
 
2.隔行变色;
 
 
3.简易年历:
 
 
4.qq延时隐藏
 
 
作业,表格的即时编辑;
 

转载于:https://www.cnblogs.com/wangzhichao/p/9335598.html

你可能感兴趣的文章
DataSet
查看>>
XMLHttpRequest - 原始AJAX初步
查看>>
有序的双链表
查看>>
mvn package时设置了maven.test.skip=true依旧执行单元测试
查看>>
Java NIO中的通道Channel(二)分散/聚集 Scatter/Gather
查看>>
Palindrome Partitioning
查看>>
四则运算
查看>>
Qt5 for Android: incompatible ABI
查看>>
zookeeper学习
查看>>
class类名的管理
查看>>
LeetCode:Rectangle Area
查看>>
文本查询
查看>>
查看帐号授权信息
查看>>
小程序(四):模板
查看>>
【转】Java - printf
查看>>
jquery获取元素到屏幕底的可视距离
查看>>
ENDNOTE使用方法(转发)
查看>>
计算机数制和运算的一点总结.
查看>>
UML系列 (五) 为什么要用UML建模之建模的重要性
查看>>
框架是什么,框架有什么用(转)
查看>>