bom和Dom

最新推荐文章于 2023-12-29 16:39:26 发布

王哥是真漂酿

最新推荐文章于 2023-12-29 16:39:26 发布

阅读量101

点赞数

文章标签： js dom

本文链接：https://blog.csdn.net/weixin_45007988/article/details/117160749

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        BOM 浏览器对象模型 核心就是window对象
        window.open(URL,name,specs,replace)  方法用于打开一个新的浏览器窗口
        innerHeight 和 innerWidth  获取浏览器窗口的宽度和高度（包含滚动条的）

        location.href 存储的是浏览器地址栏url的信息
        window.location.href = "www.baidu.com" 可以实现链接跳转
        window.location.reload()刷新网页 不要写在全局 不然一直处于刷新状态
        location.host  是一个可读写的字符串 返回当前url的主机名和端口号
        location.hostname 返回url的主机名

        history
        history.back() 回退历史记录的 回到前一个页面
        history.forward() 去到下一个历史记录里面 
        history.go(-1) 就相当于回到前一个页面


        navigator.userAgent 是获取的浏览器的整体信息
        navigator.appName 获取的是浏览器的名称
        navigator.appVersion 获取的是浏览器的版本号
        navigator.platform 获取到的是当前计算机的操作系统

        DOM document Object model 文档对象模型
        三类DOM 标准接口
            Core DOM 核心DOM 
            XML DOM 
            HTML DOM 

        三个节点
            元素节点
            文本节点
            属性节点

        document.getElementById("box") 通过标签的id名来获取
        document.getElementByClassName("box") 通过标签的class 名称获取
        document.getElementByTagName("p") 通过标签的 标签名
        document.querySelector(".box #box div") 是按照选择器的方式来获取元素
                                这个方式只能获取页面中第一个满足条件的元素
        docunment.querySelectorAll() 找到所有满足条件的元素 是一个伪数组

        querySelector 和 getElementBy 区别
        最重要的区别 querySelector 是静态节点列表
                    getElementBy  是动态的节点列表
        
        innerHTML 获取内部的html 结构
        innerText 获取元素的文本内容 不包括标签哈

        getAttribute() 获取元素的某个属性 包括自定义属性
        setAttribute() 给元素设置一个属性 包括自定义属性
        removeAttribute() 移除元素身上某个元素
        data-set html 新特性-自定义属性

        style 
            是专门给元素 添加css样式的  添加的是行内元素的
        className
            是专门操作元素的类名的 
            在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖

        
    特殊标签的获取方式
        document.body 获取body标签
        document.head 获取head标签
        document.title  获取的是title标签中内容
        document.documentElement 获取html 标签


    DOM节点
        元素节点 通过querySelector getElementBy 获取到的都是元素节点
        文本节点 通过 innerText
        属性节点 通过 getAttribute 获取的

        childNodes 获取某一个节点下的所有节点 包括 元素节点 文本节点
        children   只获取某一个节点下的元素节点
        firstChild 获取某一个节点下的第一个节点 包括文本节点
        lastChild  获取某一个节点下的最后一个节点 包括文本节点=>#text
        fristElementChild 只获取某一个节点下的第一个元素节点
        lastElementChild  只获取某一个节点下的最后一个元素节点
        nextSibling 获取某一个节点的下一个兄弟节点 包括文本节点
        previousSibling 获取某一个节点的上一个兄弟节点 包括文本节点
        nextElementSibling 只获取某一个节点的下一个元素节点
        previousElementSibling 只获取某一个节点的上一个元素节点

        parentNode 获取某一个节点的父节点 parentNode
        attributes 获取某一个节点的所有属性节点 attributes attributes 
        
        nodeType 获取节点的节点类型 用数字表示
        1 就代表 元素节点
        2 就代表 属性节点
        3 就代表 文本节点


        -nodeName：获取节点的节点名称
            console.log(eleNode.nodeName) // LI
            console.log(attrNode.nodeName) // test
            console.log(textNode.nodeName) // #text
        - 元素节点的 nodeName 就是 大写标签名
        - 属性节点的 nodeName 就是 属性名
        - 文本节点的 nodeName 都是 #text

        nodeValue： 获取节点的值
        - 元素节点没有 nodeValue
        - 属性节点的 nodeValue 就是 属性值
        - 文本节点的 nodeValue 就是 文本内容

    操作DOM 节点 无非就是增删改查
        createElement 创建一个元素节点
        createTextNode 创建一个文本节点
        appendChild 向父元素节点的末尾追加一个子节点
        insertBefore 向某一个节点前追加一个节点
        父节点.insertBefore(要插入的节点，插入再哪一个节点的前面)

        removeChild 移除父节点下的某一个节点
        父节点.removeChild()

        replaceChild(新节点，旧节点) 替换节点
        cloneNode ：克隆页面中的某一个节点

    获取元素的非行间样式
        getComputedStyle（非IE使用） window.getComputedStyle(oDiv).height
        currentStyle（IE使用） oDiv.currentStyle.height


    创建文档碎片
        var oFrag = document.createDocumentFragment();   
    
    clientWidth和clientHeight   内容+padding的区域的宽度和高度

    clientLeft和clientTop 获取的上边框和左边框的宽度

    offsetLeft 和 offsetTop 获得元素的偏移量

    offsetWidth 和 offsetHeight 获取元素内容宽高 + padding宽高 + border宽高 的和

        

    - 获取的是页面向上滚动的距离
    - 一共有两个获取方式
    - document.body.scrollTop
    - document.documentElement.scrollTop



        */
        // console.log(window.innerWidth);
        // console.log(window.innerHeight);
        console.log(window.location.href);
        // window.location.href = "./ES5和ES6.html"
        console.log(window.location.host); // 127.0.0.1:5500
        // window.location.host = "http://localhost:8080"
        console.log(window.location.hostname); //127.0.0.1
        // console.log(document.documentElement);
    </script>
</body>

</html>

王哥是真漂酿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
bom和Dom

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫