zoukankan      html  css  js  c++  java
  • javascript教程系列-9.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.网页换肤
     
     
    2.隔行变色;
     
     
    3.简易年历:
     
     
    4.qq延时隐藏
     
     
    作业,表格的即时编辑;
     

  • 相关阅读:
    学生排队 201703-2
    让动画停在最后一帧 forwards animation-fill-mode
    新版本的charles代理本地接口
    移动端调试插件Tencent / vConsole
    HDU
    Codeforces Round #668 (Div. 2)(A B C D)
    The 13th Chinese Northeast Collegiate Programming Contest
    2020, XIII Samara Regional Intercollegiate Programming Contest (B D)
    tarjan算法 双连通分量
    Codeforces Round #666 (Div. 2) (A B C D)
  • 原文地址:https://www.cnblogs.com/wangzhichao/p/9335598.html
Copyright © 2011-2022 走看看