JS.DAY.13.笔记

Voyager
186 阅读3分钟

一、 DOM

- DOM基础

  1. DOM: document object model 操作页面标签和css
  2. 实际上是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  
        // title标签的改写
        document.title = "改了" // title是可读可写的

        // console.log();

二、页面的几种宽高

- clientWidth / clientHeight 浏览器的可视宽高

       console.log(document.documentElement.clientWidth);// 浏览器的可视宽度

        console.log(document.documentElement.clientHeight);// 浏览器的可视高度

- scrollWidth / scrollHeight 浏览器的实际宽高

        console.log(document.documentElement.scrollWidth);//浏览器的实际宽度

        console.log(document.documentElement.scrollHeight)//浏览器实际高度

- scrollTop / scrollLeft 浏览器页面被卷去的宽高

        console.log(document.documentElement.scrollTop);
        // 浏览器滚动后被卷去的高

        console.log(document.documentElement.scrollLeft)
        // 浏览器滚动后被卷去的宽

- 返回顶部代码实现

    <script>
        // 获取元素
        //   ByClassName 得到的一定是一个数组，即使只有一个值也是数组
        var oDivs = document.getElementsByClassName("a");
        console.log(oDivs)// getElementsByClassName("a"),这个方法始终会得到一个数组
        oDivs[0].onclick = function(){
            var t = setInterval(function(){
                // 页面被卷去的高度在减小
                document.documentElement.scrollTop--;
                if(document.documentElement.scrollTop == 0){
                    clearInterval(t)
                }
            },10)
        }
    </script>

- 判断达到底部

<body>

    <p id="p">已经见底了，耶斯莫拉</p>
    <script>
        var oP = document.getElementById("p");
        //判断是否到达底部：页面被卷去的高度

        // 求最大的滚动高度 = 页面的实际高度 - 浏览器可视的高度（可以写在onscroll事件之外，目的不是让他成为全局变量，而是减少计算的时间---优化性能）
        var maxHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight - 10;

        var t; 
        window.onscroll = function(){
            // 防抖，避免滚动事件一直被触发
            clearTimeout(t)
            t = setTimeout(function(){
                console.log(maxHeight);
                if(document.documentElement.scrollTop >= maxHeight){
                console.log("已经见底了")
                oP.style.display = "block"
                }
            },300)  
        }
    </script>
</body>

三、获取的元素方式

  1. document.getElementById() 获取一个元素
  2. document.getElementsByClassName() class是关键字 className 获取一个元素集合
  3. document.getElementsByName() 通过name属性来获取元素（一般只有表单才有name属性） 也是获取一个数组
  4. document.getElementsByTagName() 通过标签名获取元素集合

- ES6新增的方法：查询选择器

  1. document.querySelectorAll() 获取所有的元素集合
  2. document.querySelector() 获取第一个

四、标签的内容操作

  1. value 输入框的内容
  2. innerHTML 标签的内容 识别标签
  3. innerText 标签的内容 不识别标签 --- 把标签当做了内容的一部分

五、标签的属性

-获取标签的属性

- 获取所有的属性 attributes

  1. attribute 属性:包括自有属性和自定义属性
        console.log(oDiv.attributes);

        console.log(oDiv.attributes.id); // id = "a"

- 获取具体的属性 getAttribute("属性名")

        console.log(oDiv.getAttribute("id")); // a
        console.log(oDiv.getAttribute("calss")); // b

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

        // 添加属性
        //   setAttribute("属性名" , "属性值") 如果属性已经存在，就会产生覆盖  
        oDiv.setAttribute("qq","q")

-删除指定的属性 removeAttribute("属性名")

        // 删除属性
        oDiv.removeAttribute("aa")

- 简写

  1. 自有属性可以直接使用
        console.log(oDiv.id);
        oDiv.id = "h"

        console.log(oDiv.className); //注意因为class是关键字，在直接调用自有属性class时要写成className
  1. 自定义属性不能简写
        // 自定义属性不能直接使用
        console.log(oDiv.vv);//因为vv是自定义的属性，所以拿不到这个值

六、标签名的类型

- className 是一个字符串

- classList 是一个伪数组

- classList的方法

  1. .add()添加类名
  2. .remove()移除类名
  3. .replace()替换（"替换前的类名","替换后的类名（不能为空值）"）

七、标签的样式

- 操作样式

- 获取样式

  1. getComputedStyle(obj)["color"]
  2. 如果是行内样式 就可以直接获取 obj.style.color。非行内无法拿到

- 设置样式

  1. obj.style.color = "red"
        var oDiv = document.querySelector(".a")
        // js动态添加的样式会以行内样式的形式存在
        oDiv.style.color = "blue"
        // 遇到 - 时改为驼峰命名法
        oDiv.style.fontSize = "20px"
  1. cssText 给标签添加多个样式，但是会覆盖之前的行内样式。比如：obj.style.cssText = "color:red;width:100px"--会覆盖之前的行内样式，不想覆盖就（+=）
        // 给标签添加多个样式
        // cssText 给标签添加多个样式，但是会覆盖之前的行内样式，（不想覆盖就+=）
        oDiv.style.cssText = "width:600px;color:red"
avatar
文章
阅读
粉丝