JS基础知识day10

知识点回顾：

BOM --- window对象

           重新认识变量和函数  都属于window对象的属性和方法

           属性

               navigator     userAgent

               history          length  go()

               location  地址栏相关信息  http://www.jd.com:80/html/login.html?username=aa&password=123#name

                                   href

                                   assign()

                                   replace()  不会被历史记录

           方法

              onload

              onscroll

              onresize

              onfocus

              onblur

              注意：页面资源的分配 --- 获取焦点的页面资源会优先加载

          移动端适配 --- 网易适配，淘宝适配 flexible.js（可根据网上资料研究）

           获取所有的元素  getElementsByClassName()  元素集合

           循环绑定事件   this

DOM : document object model    操作页面标签和css

        DOM实际上是BOM的一部分

        DOM基本操作：

        console.log(document);

        console.log(document.documentElement);  // html

        console.log(document.body);  // body

        console.log(document.head);  // head

        console.log(document.title);  // title

        document.title = '百度一下'  // title 是可读可写的

---

页面的几种宽高

        clientWidth / clientHeight  浏览器的可视宽高

        scrollWidth / scrollHeight  浏览器的实际宽高

        scrollTop / scrollLeft      页面被卷去的宽高

        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);

        console.log(document.documentElement.scrollHeight);

        console.log(document.documentElement.scrollTop);

        console.log(document.documentElement.scrollLeft);

 IE8以下的版本不能识别documentElement.

        // 低版本IE的写法
        // console.log(document.body.scrollTop); 

        // 短路赋值
        var root = document.documentElement || document.body ;

获取元素

        document.getElementById   获取一个元素

        document.getElementsByClassName  （class是关键字    className获取一个元素集合）

        document.getElementsByName     通过name属性来获取元素集合(一般只有表单才有name属性)

        document.getElementsByTagName()  通过标签名获取元素集合

ES6新增的方法  

         querySelectorAll()  获取所有的元素集合

         querySelector()   获取第一个

标签的内容操作

        value   输入框的内容

        innerHTML  标签的内容   识别标签

        innerText  标签的内容   不识别标签 --- 把标签当做了内容的一部分

获取标签的属性

           获取所有的属性  attributes

           获取指定的属性值  getAttribute('属性名')

           添加或者替换属性  setAttribute('属性名' , '属性值')

           添加属性

           setAttribute('属性名' , '属性值')  如果已经存在，就会产生覆盖

           删除指定的属性    removeAttribute('属性名')

           简写

              自有属性可以简写  oDiv.id   oDiv.className

              自定义属性不能简写

表单上的自有属性也可以直接简写

          disabled = true / false

          checked = true / false

          selected = true / false

标签的类名

       className 是一个字符串

        classList  是一个伪数组

                   .add()  添加类名

                   .remove()  删除类名

                   .replace()  替换类名

标签的样式操作

  1 获取样式

               getComputedStyle(obj)['color']

               如果是行内样式  就可以直接获取   obj.style.color

2 设置样式

               obj.style.color = 'red' ;

               obj.style.cssText = 'color:red;width:100px;'  --- 会覆盖之前的行内样式(不想覆盖就+=)

                cssText给标签添加多个样式,但是会覆盖之前的行内样式

                currentStyle 只在IE8及以下可以识别

        var oDiv = document.querySelector('.a') ;

        // js动态添加的样式会以行内样式的形式出现
        oDiv.style.color = 'red'
        // 改为驼峰
        oDiv.style.fontSize = '20px'
        // js只能拿到行内样式
        console.log(oDiv.style.color);

        console.log(oDiv.style.height);  // 非行内样式无法获取

        给标签添加样式

          1 通过cssText添加

          2 直接加类名

        （一般主要用第二种方式更为方便）