webAPI的基础理解与运用文本框DOM节点（八）

获取下拉列表框选中状态

1. DOM对象.selected     ---> 获取当前列表项的选中状态的 

   如果得到结果是true，那么代表被选中了

   如果得到的结果是false，那么代表未被选中


2. DOM对象.selected = 值;   ----> 设置列表项是否被选中

    如果值是true ，那么代表被选中
    如果是false，那么代表未被选中

文本框事件

1. onfocus   ----> 当输入框获取鼠标焦点时候触发的一个事件 

2. onblur    ----> 当输入框失去焦点时候触发的一个事件

补充：

    通过js操作元素的隐藏和显示

    DOM对象.style.display = 'none'  | 'block'

鼠标事件

1. onmouseenter     ----> 鼠标进入的事件

2. onmouseleave     ----> 鼠标离开时候的事件

3. onmouseover      ----> 鼠标悬停事件（相当于鼠标进入）

4. onmouseout       ----> 鼠标离开事件

操作标签属性

1. getAttribute()    
    -----> 获取属性的值【包括标签本身就支持的属性也包括用户自定义的属性】

    总结：
         ☞ getAttribute('标签的属性名字')

         ☞ getAttribute()必须设置参数

         ☞ 如果标签中没有设置对应的属性，那么通过 getAttribute() 得到的结果是 null

         ☞ getAttribute() 可以获取用户自定义的属性

2. setAttribute()
     -----> 设置标签的属性

     总结：
         ☞ setAttribute('属性名','值');

         ☞ 第一个参数表示的是 属性

         ☞ 第二个参数表示的是该属性对应值

         ☞ 通过setAttribute可以设置标签自定义的属性

3. removeAttribute()
    ----> 移除标签的属性

    总结：
         ☞ removeAttribute('属性')

         ☞ 可以移除掉用户自定义的属性

操作自定义属性 H5 专门操作自定义属性的方式

    ☞ 在H5中如何定义自定义属性

       如果要给一个标签设置自定义属性，那么需要在属性前加 'data-'

       例如：
        <div data-age="89"   data-weight='60'></div>


    ☞ 如何通过js操作自定义属性

        DOM对象.dataset   


        总结：
             1. DOM对象.dataset   得到结果是一个对象

             2. 该对象中放的就是自定义属性

             3. 只能获取以'data-'开始的自定义属性

             4. 在获取自定义属性值的时候，不能加'data-'

             例如：
                div.dataset.weight


    ☞ 修改自定义属性的值

         DOM对象.dataset.自定义属性名 = 值;

    ☞ 如果希望给标签动态添加一个自定义属性

         DOM对象.dataset.自定义属性名字 = 值;

         注意：
            1. 在动态添加自定义属性的时候，自定义属性的名字前不需要添加 'data-'

             例如：
              div.dataset.gender = '男';

            2. DOM对象.dataset 只能操作 以 'data-'开始的自定义属性

根据文档树方式获取标签

    文档树: 文档对象（document）

    元素：指的就是html标签

    节点： html标签，文字，属性， 空格，回车。。。

    ☞通过文档树的方式获取元素的思路： 通过父节点查找子节点， 通过子节点查找父节点

判断父元素中是否包含子节点或子元素

    ☞  父元素DOM对象.hasChildNodes()   ----> 当前父元素中是否有子节点, 返回的是布尔类型的结果，

        true 代表有节点   false 没有节点

    ☞ 父元素DOM对象.childNodes   ----> 获取父元素中的所有子节点

        总结：
            1. 返回的也是伪数组，所有的节点

    ☞ 父元素DOM对象.firstChild   ---> 获取父元素中第一个子节点

    ☞ 父元素DOM对象.lastChild    ---> 获取父元素中最后一个子节点


    ☞【掌握】父元素DOM对象.children    ----> 获取父元素中的子元素（标签）

        总结：
             1. 父元素DOM对象.children 返回的是伪数组

             2. 如果父元素DOM对象.children的length属性的长度 等于0 ，没有子元素

    ☞【掌握】父元素DOM对象.firstElementChild   ---> 获取父元素中第一个子元素

        总结：
            1. 通过该属性得到的结果就是对应元素的对象

    ☞【掌握】父元素DOM对象.lastElementChild   ----> 获取父元素中最后一个子元素

        总结：
           1. 通过该属性得到的结果就是对应元素的对象

根据子元素获取标签的相关属性

    ☞ 【掌握】获取当前元素的父节点

        DOM对象.parentNode

    ☞ 【掌握】获取当前元素的下一个兄弟元素

        DOM对象.nextElementSibling

        总结：
             1. 得到的结果是与当前元素最接近的那个兄弟元素

    ☞ 【掌握】获取当前元素的上一个兄弟元素

        DOM对象.previousElementSibling

        总结：
             1. 得到的结果是与当前元素最接近的那个兄弟元素

    ☞ 获取元素类型

         DOM对象.nodeType    ----> 结果如果是1 ，代表当前的节点就是一个标签

         DOM对象.nodeType    ----> 结果如果是3，代表的是一个空文本

    ☞ 获取元素名字

         DOM对象.nodeName   ----> 获取当前节点的名字

         DOM对象.nodeName   ----> #text ,代表当前节点就是一个空节点（回车，空格）

动态创建元素

    1. 通过innerHTML方式创建一个标签

    2. document.write() 创建一个标签

    3. 通过方法创建元素

        ☞ document.createElement('标签的名字') [通过document.createElement()创建出来就是对应的标签对象]

        ☞ 将创建要的元素要添加到对应的文档节点中

        ☞ 通过 父节点.appendChild(动态创建的元素)  ----》 添加到页面中

        总结：
            appendChild() 不能设置字符串，一定是一个对象

    4. 移除元素

        父元素DOM对象.removeChild(要被移除的node节点);