JS--------DOM


 一、DOM改变网页的内容、结构、样式

二、文档:一个页面就是一个文档,DOM中用document表示;

       元素:页面中所有标签都是元素,DOM中用element表示;

       节点:网页中所有内容都是节点(标签、属性、文本、注释等),DOM中使用node;

DOM把以上内容都看作对象;

三、获取元素

1:如何获取页面元素

    {

      《1》根据ID获取;getElementByID(‘’)  document.getElementByID('');

      《2》根据标签名获取:document.getElementByTagName('标签名、元素名');

      《3》通过HTML5新增的方法获取:{

                                                                  document.getElementByClassName('类名');

                                                                 document.querySelector('选择器'):得到第一个元素对象

                                                                 例如:

                                                                 



    Title
  


"a">
class="b">
  •                                                               document.querySelectorAll('选择器');

                                                                     }

          《4》获取特殊元素:(body、html)

                  获取body:document.body

                 获取html:document.getElement

    四:事件基础

    只有用如上方法获取了元素,才能对元素进行一些操作

    步骤:

         《1》获取事件源(获取元素)

          《2》事件类型(如何触发什么事件   例如;鼠标点击)

           《3》事件处理程序,通过一个函数赋值的方式完成;

    例如:

    
    
        Title
      
    
    
    

     五、常见的鼠标事件

    onclick----------------------鼠标点击触发

    onmouseover-------------------鼠标经过触发

    onmouseout-----------------------鼠标离开触发

    onfocus-----------------------------获得鼠标焦点触发

    onblur-----------------------------失去鼠标焦点触发

    onmousemove------------------鼠标移动触发

    onmouseup----------------------鼠标弹起触发

    onmousedown-------------------鼠标按下触发

    六、操作元素

    1、改变元素内容

    方法一:element.innerText

    当点击按钮时,div中的内容会改变

    1:获取元素{

                        btn

                         div

                        }

    2:注事件:

             btn.onclick=function(){

                   div.innerText="2019-09-09":

                   }

    获取当前时间

     var date=new   Data();
        var year=date.getFullYear();
        var month=date.getMonth();
        var dates=date.getDate();
        var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
          var day=date.getDay();
    

      把如上内容放到一个函数中,调用函数

    改变谁的内容谁=修改的内容

    方法二:innerHTML(使用较多)

    二者区别 innerText不识别HTML标签

    七、操作元素

    《一》样式属性操作

    可以通过js来修改元素的大小、颜色、位置等样式

    1:修改元素样式有两种方式

    element.style    (元素.style):行内样式操作

    元素.className:类名样式操作

    className会覆盖原来的类

    2:既保留原来的类,又有新的类

       .className='原类名  空格  新类名'

    八、排他思想

    排他思想:如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:

    1:所有元素全部清除样式;

    2:给当前元素设置样式;

    3:注意顺序不能颠倒;