DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_68478665/article/details/126321339

DOM节点分类

元素节点：获取元素节点 qureSelector；qureSelectorAll）
文本节点：（innerHTML)
属性节点：（element.src；element.id）

innerHTML 是可以改变元素节点内的所有内容的

在ul中添加li标签

ul.lnnerHTML = <li>1</li>

<button>按钮</button>
<ul></ul>


<script>
let btn = document.querySelector("button")
let ul = document.querySelector("ul")
btn.onclick = function(){
ul.innerHTML = `
<li>香蕉</li>
<li>苹果</li>
<li>菠萝</li> `}

innerHTML是大刀阔斧的操作

节点操作

创建元素节点 createElement
创建文本节点 createTextNode
添加节点 appendChild

实现添加li标签内容

        let inp = document.querySelector("input");
        let btn = document.querySelector("button");
        let ul = document.querySelector("ul");
        btn.onclick = function(){
            let value = inp.value;
            let li = document.createElement("li");
            let txt = document.createTextNode(value);
            ul.appendChild(li);
            li.appendChild(txt);
        }

删除节点 removeChild

实现删除li标签内容

    <ul class="fruit-list">
        <li>121</li>
        <li>321</li>
        <li>2312</li>
    </ul>
//添加class  定位元素class记得前面加.
let ul = document.querySelector(".fruit-list");
let list = document.querySelectorAll(".fruit-list li")
// 定位元素
        for (let i in list){
            list[i].onclick = function(){
                ul.removeChild(this);
            }
        };
// 为每个循环的元素添加click事件 删除用在父级标签上

input文本框的value属性就是文本框输入的内容

事件对象

事件监听函数的形参可以获取事件对象。通过事件对象可以获取鼠标坐标。

获取X坐标： e.clientX;
获取Y坐标：e.clinentY;

<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector(".box")
        box.onclick = function(event){
            console.log(event.clientX);
            console.log(event.clientY);
        }
    </script>
</body>

实现鼠标显示图片的大图

笔记：

e.style.top =
e.style.left=
e.style.right =
e.style.bottom =

获取需要被添加元素的div不需要使用All 不然添加的元素会变成数组形式，无法使用；

用多少写多少，或者注释没使用的，否则会报错；设置额外距离，否则就会因为遮挡而闪烁。

    <style>
        .picture-list img{
            width: 320px;
            height: 160px;
        }
        .big-pictrue{
            position: absolute;
        }
        .big-pictrue img{
            width: 640px;
            height: 320px;
        }
    </style>
</head>
<body>
    <div class="picture-list">
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
    </div>
    <div class="big-pictrue"></div>
    <script>
        let picList = document.querySelector(".picture-list") //因为要跟随行动所有需要获取它
        let imgList = document.querySelectorAll(".picture-list img");
        let bigPictrue = document.querySelector(".big-pictrue")
        for(let i in imgList){
            imgList[i].onmouseenter = function(){
                bigPictrue.innerHTML = `<img src= '${this.src}'>`
            };
            imgList[i].onmouseleave = function(){
                bigPictrue.innerHTML = ''
            }
        }
        picList.onmousemove = function(e){
            let ex = e.clientX;
            let ey = e.clientY;
            // console.log(`X坐标是${ex},Y坐标是${ey}`) //直接写变量即可 已经赋值给变量 无需this
            bigPictrue.style.top = ey + 10 +"px";
            bigPictrue.style.left = ex + 10+ "px"; //到这一步会闪动  需要额外添加像素防止阻挡闪烁
        }
    </script>

15-DOM节点操作