dom与bom学习总结

最新推荐文章于 2024-06-27 14:51:05 发布

qq_40153458

最新推荐文章于 2024-06-27 14:51:05 发布

阅读量143

点赞数

文章标签： html5 html typescript

本文链接：https://blog.csdn.net/qq_40153458/article/details/115671207

版权

元素==>属性==>样式==>节点==>事件

<!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>dom与bom学习总结</title>
    <style>
        .aa {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .aab {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .aaa {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div></div>

    <div class="aa">aaa
    <input type="text" id="aa" value="123">
    <img class="as" src="images.jpg" alt="无" title="asa">  
    </div>
    <button>点击</button>

    <ol class="aaa">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

    <!-- 自定义属性 -->
    <div id="demo" index="1" data-index="2" class="nav"></div>
    
    <script>
// DOM 
        //获取元素
        var a = document.getElementById('aa')
        var b = document.getElementsByTagName('div')
        var c = document.getElementsByClassName('aa')
        var d = document.querySelector('.as')
        var e = document.querySelectorAll('#aa')
        var f = document.querySelector('.aaa')
        var h = document.querySelector('li')
        var i = document.querySelector('button');

        //获取与修改属性
        b[0].innerText="213123"
        // c[0].innerHTML="<h2>ssss</h2>"
        d.alt = "没找到"
        a.value=221

        //修改样式
        // c[0].style.backgroundColor='red'
        // c[0].className='aab'

        //自定义属性
        console.log(b[2].getAttribute('index'))
        b[2].setAttribute('index',4)
        b[2].removeAttribute('index')
        console.log(b[2].dataset['index'])
        console.log(b[2].dataset.index)

        //节点操作
        var li = document.createElement('li')
        var lli = document.createElement('li')
        f.appendChild(li)
        f.insertBefore(lli,f.children[0])
        f.removeChild(f.children[0])
        var llli = f.children[0].cloneNode(true)
        f.appendChild(llli)

        //节点关系
        console.log(a.parentNode)
        console.log(f.children)
        console.log(f.children[0])
        console.log(f.children[f.children.length - 1])
        console.log(a.nextElementSibling)
        console.log(a.nextElementSibling.previousElementSibling)

        //事件
        a.onclick = function(){
            alert("aaa")
        }
        a.addEventListener('click',function(){
            alert(22);
        },true)

        a.onclick=null;
        a.addEventListener('click',fn)
        function fn() {
            alert(44)
            a.removeEventListener('click',fn)
         }

         //事件对象
         a.onclick=function(e){
            e = e || window.event;
            console.log(e);
            console.log(e.target);
            concsole.log(this);

            e.preventDefault(); //  dom 标准写法默认行为
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            // return false;
            
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
         }

         //常见事件
         //onclick,onmouseover,onmouseout
         //onmousemove,onmouseup,onmousedown
         //onfocus,onblur
         //onkeyup,onkeydowm,onkeypress

// BOM
         //常见事件
         //onload   DOMContentLoaded
         // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
         // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
         window.onload = function() {
             alert(22);
         }
         window.addEventListener('load', function() {
             alert(22);
         })
        document.addEventListener('DOMContentLoaded', function() {
             alert(33);
         })

        // 调整窗口大小事件
         window.onresize = function(){}
         window.addEventListener("resize",function(){});

         //location 获取或设置窗体的URL，并且可以用于解析URL。
         console.log(location.search); // ?uname=andy
         console.log(location.href); 
         console.log(location.pathname); 
         // 记录浏览历史，所以可以实现后退功能
         // location.assign('http://www.baidu.cn');
         // 不记录浏览历史，所以不可以实现后退功能
         // location.replace('http://www.baidu.cn');
         //重新加载  
         // location.reload(true);

         //history
         history.forward();
         history.back();
         //history.go(-1);

         // offset 系列
         // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
         // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
         console.log(a.offsetTop);
         console.log(a.offsetLeft);
         // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
         console.log(a.offsetWidth);
         console.log(a.offsetHeight);
        
         // scroll 系列
         console.log(a.scrollTop);
         console.log(a.scrollLeft);
         console.log(a.scrollHeight);
         console.log(a.scrollWidth);

         // classList 返回元素的类名
         // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
          a.classList.add('three');
         // 2. 删除类名
          a.classList.remove('one');
          // 3. 切换类
          a.classList.toggle('one')

          
            

    </script>
</body>
</html>

qq_40153458

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom与bom学习总结

元素==>属性==>样式==>节点==>事件<!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-
复制链接

扫一扫