javascript_basic04

一、DOM的含义

1、DHTML

动态的HTML，是现有技术整合的一个统称，让网页在离线状态也能保存动态效果
        DHTML = HTML + CSS + JS

2、DOM

        文档对象模型，专门用于操作文档（HTML和CSS） 
 

3、DOM树

   在HTML文档中，所有的元素、属性、文本、注释等都会被视为一个DOM节点/DOM对象/DOM元素

4、概念：其实树根是document对象

   在JS中，不需要我们去创建的，由浏览器的js解释器自动创建，且一个页面只有一个document
   作用：通过树根可以找到下面的任何一个DOM元素，还可以操作他

5、获取元素：类似css的选择器 - 必须先找到元素才能操作元素

   1、通过 HTML的特性 获取元素：
    (1)、ID获取：
       语法：var elem=document.getElementById("id值"); -- id是唯一
       在当前 DOM树中，根据元素的id，获取具体的dom节点
       返回：找到了，保存的就是对应的元素
                  没找到，返回的是一个null
       强调：输出来长得像一个标签的样子，才叫做DOM节点/DOM对象/DOM元素，才能去执行后续操作
    
    (2)、标签名获取：
       语法：var elems=document/parent.getElementsByTagName("标签名");
       在当前 DOM树中，根据元素的标签名，获取了具体的dom集合（类数组集合）
       返回：找到了，返回的是一个类数组集合
                   没找到，返回的是一个空集合[];
       强调：1、dom集合不允许直接做后续操作，会报错

                  解决：1、加下标获取到某一个 2、循环遍历获取到所有
                  2、parent代表的是你已经找到的某个父元素

    (3)、class名获取
       语法：var elems=document/parent.getElementsByClassName("class名");
       在当前 DOM树中，根据元素的class名，获取了具体的dom集合（类数组集合）
       返回：找到了，返回的是一个类数组集合
                  没找到，返回的是一个空集合[];
       强调：1、dom集合不允许直接做后续操作，会报错

                  解决：1、加下标拿到某一个 2、循环遍历拿所有
                2、parent代表的是你已经找到的某个父元素

  2、通过 元素之间的关系 获取元素：
    使用的前提条件：至少要找到一个人才能动用关系

    父元素：xx.parentNode; //单个元素
    子元素：xx.children; //集合
    第一个儿子：xx.firstElementChild; //单个元素
    最后一个儿子：xx.lastElementChild; //单个元素
    前一个兄弟：xx.previousElementSibling; //单个元素
    后一个兄弟：xx.nextElementSibling; //单个元素
    

    强调：集合不能做操作，只有单个元素可以

6、操作元素

前提：1、至少要找到元素
           2、页面上所有的东西数据类型都是一个字符串
   1、元素的内容
       1、innerHTML属性：
        语法：获取：elem.innerHTML; - 往往都是用来做判断的
                   设置：elem.innerHTML="内容"; - 修改

       2、innerText属性：
        语法：获取：elem.innerText;
                  设置：elem.innerText="文本";

    小总结：以上两个操作几乎相似，但是innerHTML才可以识别标签，innerText只能操作纯文本 -                    只有双标签可用
 
       3、value属性：专为单标签input准备的获取和设置内容
        语法：获取：input.value;
                  设置：input.value="值";

   2、元素的属性

     什么叫属性：<elem id class src alt href title style ></elem>
    1、获取元素的属性值 - 往往都是用来做判断的
        elem.getAttribute("属性名");

    2、设置元素的属性值 - 修改
        elem.setAttribute("属性名","属性值");

    属性的简化版操作：
        1、获取元素的属性值：elem.属性名; - 往往都是用来做判断的
        2、设置元素的属性值：elem.属性名="属性值"; - 修改

        简化版小缺陷：1、class必须写为className
                                  2、自定义属性不能操作，只能操作标准属性

   3、元素的样式
    1、CSS定义的方式：
        1、内联样式 - JS要操作最好就要操作内联样式
        2、内部样式表
        3、外部样式表 - 一阶段最适合开发时使用

    2、为什么JS要尽量的操作内联样式：
        1、优先级最高 - 写的JS的样式不至于别人给覆盖了
        2、牵一发而动全身 - 内联样式只会修改到当前元素

    3、语法：
        获取：elem.style.css属性名; - 往往都是用来做判断的
        设置：elem.style.css属性名="css属性值"; - 修改
        特殊：1、css属性名写法不一样，把横线删掉换成驼峰命名法
            CSS：                                     JS：
            width                                           width
            background-color                        backgroundColor
            border-top                                   borderTop
            

7、新的绑定事件的操作:

    HTML与JS分离

   elem.οnclick=function(){
    写操作
    特殊：事件中可以使用一个关键字 this
        1、单个元素绑定了事件 this->这是单个元素
        2、多个元素循环同时绑定了事件 this->当前触发事件的元素

    建议：如果你在事件中想要使用到绑定事件的元素，推荐使用this
   }