JavaScript 中 DOM 元素的获取和相关操作——笔记整理0517

最新推荐文章于 2023-06-16 04:18:31 发布

daisy0328

最新推荐文章于 2023-06-16 04:18:31 发布

阅读量1.3k

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/daisy0328/article/details/106182398

版权

web前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

一、什么是DOM元素

DOM (Document Object Model) 即文档对象模型。简称DOM 元素，即HTML元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。（引用自菜鸟）

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二、JavaScript 中如何获取 DOM元素

通过 JavaScript 操作 HTML 元素，必须首先找到该元素。
获取DOM共3类方式，分别为：动态获取、静态获取、固定对象获取；共8种获取方案。
获取DOM元素的时候需要注意：DOM元素是否初始化（是否已经存在）

1、四种动态获取dom元素的方法

document.getElementsByClassName("") 通过class 类名称获取元素，返回的是一个集合
document.getElementsByName("") 通过元素的name属性获取元素，返回的是一个集合
document.getElementById("") 通过元素的id获取，返回的是一个对象
document.getElementsByTagName("") 通过元素名称获取，返回的是一个集合

1、如果获取到的dom元素是一个集合，想要在集合里面获取某一个对象，使用键来获取。
如： console.log(btn[0]);，btn 为变量名称，[0] 为获取到的对象集合的键
2、如果获取到的dom元素是一个对象，直接在控制台输出即可。
如：console.log(btnid)

举例：

<body>
<button name="buttoninfo" class="list">按钮</button>
<button name="buttoninfo" id="btn" class="list">按钮</button>
<button name="buttoninfo" class="list">按钮</button>
<button name="buttoninfo" class="list">按钮</button>
<button name="buttoninfo" class="list">按钮</button>
<script>
    var btn=document.getElementsByClassName("list");  //HTMLCollection  获取的是一个HTML集合
    console.log(btn);   //在控制台输出上边获取的HTML集合
    console.log(btn[0]);   //在控制台输出上边获取的HTML集合的第一个button元素   
    
    var btnid=document.getElementById("btn");  //返回的是一个对象
    console.log(btnid);  //在控制台输出这个对象
</script>
</body>

注意：

dom元素类获取、标签获取、name获取都可以动态获取元素。即：获取用代码添加的元素。（但是要在添加之后获取）

//用代码添加一个元素到网页
<script>
    var btnlist=document.createElement("button");
    btnlist.name="buttoninfo";
    btnlist.className="list";
    document.body.appendChild(btnlist);
    
    //检测是否可以动态获取用代码添加的元素
    //dom元素类获取   标签获取   name获取都可以动态获取元素
    console.log(btnclass.length);  //6  在上例中5个的基础上增加了一个
    console.log(btnname.length);  //6  在上例中5个的基础上增加了一个
    console.log(btnele.length);  //6  在上例中5个的基础上增加了一个
</script>

2、两种静态获取dom元素的方法

document.querySelector(""); 返回的是一个单个对象
document.querySelectorAll(""); 返回的是一个列表，NodeLIst 集合

注意：

1、这两种方法只能获取到初始化时的元素，用代码添加的元素获取不到。
2、方法里面的参数和css选择器一致，并且只能写选择器。
3、document.querySelector(); 方法获取单个对象，如果选择器对应一个集合，那么获取到的是集合里边的第一个元素对象。

举例：
document.querySelector("");

<script>
    var btnq=document.querySelector("#btn");
    console.log(btnq);
    var btnc=document.querySelector(".list");
    console.log(btnc);  //获取到的是集合里边的第一个元素对象
    var btnn=document.querySelector("button");
    console.log(btnn);  //获取到的是集合里边的第一个元素对象
</script>

document.querySelectorAll("");

<script>
    var btnq1=document.querySelectorAll("#btn");
    console.log(btnq1);  //获取到的是length为1 的 NodeLIst 集合
    var btnc1=document.querySelectorAll(".list");
    console.log(btnc1);  //获取到的是 NodeLIst 集合
    var btne1=document.querySelectorAll("button");
    console.log(btne1);  //获取到的是 NodeLIst 集合
</script>

3、两种固定对象获取dom元素的方法

document.body; 获取整个body元素
document.documentElement; 获取整个html元素
举例：

<script>
    //body
    var body=document.body;
    console.log(body);
    //或者直接输出
    console.log(document.body);
    //html
    var html=document.documentElement;
    console.log(html);
    //或者直接输出
    console.log(document.documentElement);
</script>

4、获取dom元素之后，进行遍历

（1）使用for循环进行遍历
例如：使用类获取 li，进行遍历，其它的集合的遍历方法都是一样的

<body>
<ul>
    <li class="list">第一个</li>
    <li class="list">第二个</li>
    <li class="list">第三个</li>
    <li class="list">第四个</li>
</ul>
<script>
    //获取dom对象
    var lilist=document.getElementsByClassName("list");
    console.log(lilist.length);
    
    //使用for循环 进行遍历
    for (var i=0;i<lilist.length;i++){
        console.log(lilist[i]);
    }
</script>
</body>

（2）使用for in 进行遍历

<body>
<ul>
    <li class="list">第一个</li>
    <li class="list">第二个</li>
    <li class="list">第三个</li>
    <li class="list">第四个</li>
</ul>
<script>
    //获取dom对象
    var lilist=document.getElementsByClassName("list");
    
    //使用for in 进行遍历
    for(var key in lilist){
        console.log(lilist[key]);  //key是键  根据键去对象里边获取值
    }
</script>
</body>

三、获取DOM元素之后进行操作

操作对象是指操作对象的属性、行为（事件）。
注意：
js操作dom，不能操作一堆，只能转化为单个对象进行操作。
先获取，再操作。

var btn=document.getElementsByClassName("btn")[0];
console.log(btn);

1、修改或设置name

btn.name="dom"; 修改或设置name
btn.className="btn btninfo"; 类赋值的时候，直接将原先的值进行覆盖，可以类名称空格类名称的方式赋值
btn.classList.add("btn-name"); 给元素添加类名称

2、文本值操作，修改或设置文本

btn.innerText="我是按钮"; 操作的是文本
btn.innerHTML="我是一个按钮"; 获取元素里边的子内容
console.log(btn.innerText); 获取的是当前元素的文本值
console.log(btn.innerHTML); 获取的是当前元素里边的子内容，包含HTML标签
btn.innerText="<span>我是按钮</span>"; 不会自动解析字符串里边的标签
btn.innerHTML="<span>我是按钮</span>"; 会自动解析字符串里边的标签

3、样式属性操作

（指元素的行内样式）：
注意：js只能修改或操作元素的行内样式，非行内样式为 read-only

console.log(btn.style.color); 获取元素的行内样式
btn.style.width="200px";
btn.style.backgroundColor="pink"; 单个样式设置
btn.style="color:red;height:50px;line-height:50px;" 一次性设置多个样式

非行内样式的获取：
window.getComputedStyle() 有两个参数：该对象对应的变量名称（获取该对象样式）、伪元素（查找伪元素，可写可不写，也可写null）

例如：
console.log(window.getComputedStyle(btn).width); 获取该对象的非行内样式
console.log(window.getComputedStyle(btn, ":after").position); 获取该对象伪元素的样式

4、元素自定义属性的设置及获取

btn.setAttribute("data-index","0"); 设置自定义属性 set
console.log(btn.getAttribute("data-index")); 获取自定义属性 get
注意：设置的自定义属性为字符串类型，属性值设为数字类型，获取到的也是字符串。

5、dom元素的节点操作

节点包含文本、元素、符号。
console.log(menu.children); 获取父元素的所有子集元素
console.log(menu.childNodes); 获取的是元素的子集节点。节点包括元素、文本、符号。
（1）获取元素子集节点：

<body>
<ul class="menu">
    <li class="list">第一个</li>
    文本
    <li class="list">第二个</li>
    <li class="list">第三个</li>
    <li class="list">第四个</li>
</ul>
<script>
    var menu = document.querySelector(".menu");
    console.log(menu);
    console.log(menu.children);  //获取父元素的所有子集元素
    console.log(menu.childNodes);  //获取的是元素的子集节点
</script>
</body>

（2）使用for循环过滤子集节点：

for (var i = 0; i < menu.childNodes.length; i++) {
    console.log(menu.childNodes[i]);  //遍历所有子集节点
    console.log(menu.childNodes[i].nodeName);  //获取节点名称
    console.log(menu.childNodes[i].nodeType);   //获取节点类型
    console.log(menu.childNodes[i].nodeValue);   //获取节点值
    
    //根据条件输出节点
    if (menu.childNodes[i].nodeType == 1) {
        console.log(menu.childNodes[i]);
    }     //输出节点类型为1的节点
    if(menu.childNodes[i].nodeName.toLowerCase()=="li"){
        console.log(menu.childNodes[i]);
    }     //输出节点名称为“LI”的节点
}

字符串大小写转化
toLowerCase() 大写转化为小写
toUpperCase() 小写转大写

元素的节点类型是 1
文本的节点类型是 3
元素没有节点值 null
文本和符号有节点值

（3）子节点的其它获取方式

console.log(menu.firstChild); 获取元素的第一个子节点
console.log(menu.lastChild); 获取元素的最后一个子节点
console.log(menu.firstElementChild); 获取元素的第一个子元素
console.log(menu.lastElementChild); 获取元素的最后一个子元素

（4）获取元素的父元素

console.log(menu.parentNode); 获取当前元素的父节点
console.log(menu.parentElement); 获取当前元素的父元素
console.log(menu.parentNode.nodeName); 当前元素父节点的节点名称
console.log(menu.parentElement.nodeName); 当前元素父元素的节点名称

6、dom中元素的克隆

cloneNode() 元素的克隆，参数为true（克隆包括元素的所有子节点），默认为false（只克隆元素）。

举例：

var UlBanner = document.querySelector("#banner");
UlBanner.appendChild(UlBanner.children[0].cloneNode(true));

四、dom操作——dom元素创建

1、dom元素创建

创建元素——设置相关属性——添加到网页

document.createElement(""); 创建dom元素
appendChild() 将创建的dom元素添加到父元素之后
insertBefore() 插入到父元素之前
removeChild() 移除子元素
replaceChild() 替换子元素

<script>
    //dom元素创建
    var ele=document.createElement("button");
    console.log(ele);
    //设置相关属性
    ele.innerText="按钮";
    ele.className="btn btninfo";
    ele.style.backgroundColor="#c0c0c0";
    ele.setAttribute("data-index","0");
    //添加到网页 appendChild 追加到当前元素之后
    document.body.appendChild(ele);
</script>

2、dom元素类的获取和相关操作

dom元素类的获取有两种方案：
console.log(ele.className); 直接用属性获取元素的class名，获取到的是btn btninfo
console.log(ele.classList); 获取到的是一个DOMTokenList集合

dom元素类的相关操作：

ele.classList.add(""); 给元素添加类名称
ele.classList.remove(""); 删除指定的类名称
console.log(ele.classList.contains("")); 检测是否包含某个类，返回值是false true
console.log(ele.classList.length); 输出类的个数
ele.classList.toggle("",true); toggle方法是类别的切换，根据第二个参数 true 添加 false 删除

举例：

<script>
    //给元素添加类
    ele.classList.add("btn-classname");
    //移除类
    ele.classList.remove("btn-classname");
    //检测是否包含某个类，返回值是false true
    console.log(ele.classList.contains("btn"));  //true
    //输出类的个数
    console.log(ele.classList.length);
    //toggle 方法是类别的切换
    //根据第二个参数 true 添加  false 删除
    ele.classList.toggle("btn-classname",true);
</script>

五、dom元素的事件

事件——对象的被动行为（对象的主动行为称为方法）
事件的绑定方式——普通绑定、动态绑定、监听
常用的事件类型：

鼠标事件： mouseover（鼠标悬停）、mouseup（鼠标抬起）、mousedown（鼠标按下）、click、dblclick、mouseleave、mouseout、mousemove、mouseenter（鼠标进入事件）、mousewheel（滚轮）
键盘事件： keypress、keydown、keyup
表单事件： focus（获焦事件）、blur（失焦事件）、submit（提交事件）、change（文本发生变化事件）、input(获取用户输入事件)
浏览器事件： scroll（滚动条事件）、load（加载完成事件）、error（加载失败事件）、resize（窗口发生变化事件）、contextmenu(右键打开浏览器菜单)
剪贴板事件： cut（剪贴）、copy（复制）、paste（粘贴）、selectstart（选择事件）
点此查看更多事件类型

注意：在js里面写事件，事件类型前边全部加on

1、事件的普通绑定

在元素上直接写事件，后边写方法调用 "名称()"，如：oninput="inbox()"

<body>
<input type="text" oninput="inbox()"/>
<script>
    function inbox(){
        console.log("用户在输入");
    }
</script>
</body>

2、dom元素动态绑定事件

（1）dom元素动态绑定事件，先获取dom元素，再添加事件。

<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        console.log("按钮的点击事件");
    };
    
    btn.click();  //自动执行当前元素事件
    btn.onclick=null;  //移除动态绑定的事件
</script>

动态绑定事件时需要注意内存的泄露。在 删除元素 之后，把绑定的事件也删掉。

将上例改为函数的形式（闭包）：

<script>  
    function fun(){
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            console.log(btn);
        };
        //手动回收
        btn=null;
    }
    fun();
    //函数执行完成后将事件置空
    btn.onclick=null;
</script>

上例中btn.onclick对应的匿名函数使用到了上一级作用域的变量btn，并将其私有化，是一个闭包；
为防止内存泄漏，可以将这个变量置空，即上例中的btn=null;，或者在fun函数执行完之后，将绑定的事件移除，即上例中的btn.onclick=null;

（2）body、window 绑定事件的方法：

<script>  
    //body
    document.body.onkeydown=function(){
        console.log("键盘按下");
    };
    
    //window
    window.onmousewheel=function(){
        console.log("鼠标滚动");
    };
</script>

（3）多个元素直接动态绑定事件
使用for循环遍历
举例：

var liele=document.getElementsByTagName("li")
for(var i=0;i<liele.length;i++){
    liele[i].onclick=function(){
        console.log("点击li");
    }
}

实现点击当前元素，控制台输出当前元素

事件里面的 this 指针指的是当前事件的执行对象

var liele=document.getElementsByTagName("li")
for(var i=0;i<liele.length;i++){
    liele[i].onclick=function(){
        console.log(this);
    }
}

兼用闭包来实现点击输出当前的 i

var liele=document.getElementsByTagName("li");
for (var i=0;i<liele.length;i++){
    (function(n){
        liele[i].onclick=function(){
            console.log(n);
        }
    })(i);
}

关联当前的i到当前对象的属性上，实现点击输出当前的 i

var liele=document.getElementsByTagName("li");
for (var i=0;i<liele.length;i++){
    liele[i].index=i;
    liele[i].onclick=function(){
        console.log(this.index);
    }
}

3、dom事件的监听

1、addEventListener("",,); 有三个参数，分别为：事件的类型、监听的函数、事件的冒泡（false）和捕获（true）。第三个参数可以不写，默认为冒泡（false）；
2、监听的时候事件不写on；
3、事件的冒泡：由里向外进行冒泡
4、事件的捕获：由外向里进行捕获

举例：
（1）先获取dom元素，再绑定事件监听：

var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
    console.log("执行单击事件");
})

监听的方法可以写到外边，在addEventListener("",,);的第二个参数写函数名称

var btn=document.getElementById("btn");
btn.addEventListener("click",eventhandle);
function eventhandle(){
    console.log("监听的方法写到外边");
}
btn.removeEventListener("click",eventhandle)  //监听事件移除

监听事件移除(写到方法内部，监听一次再移除，写到方法外边，直接移除)

（2）addEventListener("",,); 第三个参数不写，默认为冒泡（false）


```csharp
<div id="block">
    <div id="box">
        <button id="btn">按钮</button>
    </div>
</div>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var block = document.getElementById("block");
    var count = 0;
    btn.addEventListener("click",function(){
        count++;
        console.log("btn", count);   //btn 1
    });
    box.addEventListener("click",function(){
        count++;
        console.log("box", count);  //box 2
    });
    block.addEventListener("click",function(){
        count++;
        console.log("block", count);  //block 3
    });
</script>

在上例中，单击btn，控制台输出以上结果，这就是事件的冒泡机制，由里向外进行冒泡。
上例中如果不使用事件监听的方式，使用dom元素动态绑定事件，也会出现事件冒泡现象。

（3）addEventListener("",,); 第三个参数写true，为捕获

<div id="block">
    <div id="box">
        <button id="btn">按钮</button>
    </div>
</div>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var block = document.getElementById("block");
    var count = 0;
    btn.addEventListener("click",function(){
        count++;
        console.log("btn", count);   //btn 3
    },true);
    box.addEventListener("click",function(){
        count++;
        console.log("box", count);  //box 2
    },true);
    block.addEventListener("click",function(){
        count++;
        console.log("block", count);  //block 1
    },true);
    }
</script>

在上例中，单击btn，控制台输出以上结果，这就是事件的捕获机制，由外向里进行捕获。

六、dom事件的执行参数

1、什么是事件执行参数

event 代表事件的执行参数对象
事件参数的输出：

（1）onclick 单击事件

var btn = document.getElementById("btn");
btn.onclick = function (event) {
    console.log(event);  //MouseEvent
};

上例中 event 可以简写为 e
鼠标事件输出参数是 mouseevent 对象

单击事件中常用的事件执行参数：

clientx、clienty 指的是当前点击的位置相对浏览器的坐标
pagex、pagey 当前的位置相对浏览器的坐标
layerx、layery 指当前的点击位置相对元素的偏移量
offsetx、offsety 指当前点的位置相对元素的偏移量
screenx、screeny 当前的位置相对屏幕的坐标
returnValue 值是true/false，指当前事件执行成功之后是否返回结果
srcElement、target、toElement 触发的目标元素
timeStamp 触发的时间标记 ms单位
type 触发的事件类型
which 值是ascii，鼠标事件全是1

（2）onkeypress 按键事件

    document.body.onkeypress = function (e) {
        console.log(e);  //鼠标事件输出参数是 KeyboardEvent 对象
    };

按键事件中常用的事件执行参数：

key 指哪个按键
which keycode 每个按键对应的ascii值

（3）onscroll 滚动条事件

    document.body.onscroll = function (e) {
        console.log(e);   //鼠标事件输出参数是 event 对象
    };

2、事件执行参数的应用

鼠标滚轮事件 onmousewheel

滚轴里边判断上滑和下滑 deltaY

    window.onmousewheel = function (e) { 
        if (e.deltaY > 0) {
            console.log("上滑");
        }
        else {
            console.log("上滑");
        }
    };

3、使用事件执行参数处理dom事件冒泡

可以设置子元素的事件执行参数，阻止事件冒泡，即以下两种方法：

e.stopPropagation(); 阻止传播
e.cancelBubble=true; 将event事件执行参数中cancelBubble 的值设为true，取消事件冒泡

举例：

<div id="block">
    <div id="box">
        <button id="btn">按钮</button>
    </div>
</div>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var block = document.getElementById("block");
    var count = 0;
    btn.addEventListener("click",function(e){
        count++;
        console.log("btn", count);   //btn 1
        //e.stopPropagation();  //阻止事件冒泡
        e.cancelBubble=true;  //也可以阻止事件冒泡
    });
    box.addEventListener("click",function(){
        count++;
        console.log("box", count);  
    });
    block.addEventListener("click",function(){
        count++;
        console.log("block", count);  
    });
</script>

4、使用事件执行参数处理事件的默认行为

有以下三种方式：

return false;
e.preventDefault(); 阻止默认
e.returnValue=false; 将event事件执行参数中returnValue 的值设为false，阻止事件默认行为

应用举例：
在浏览器上右键出现菜单——阻止

    window.oncontextmenu=function(e){
        //return false;
        //e.preventDefault();
        e.returnValue=false;
    }

禁止用户页面选择

    document.onselectstart=function(e){
        //return false;
        //e.preventDefault();
        e.returnValue=false;
    };

禁止用户复制

    document.oncopy=function(e){
        //return false;
        //e.preventDefault();
        e.returnValue=false;
    };

七、用户复制时添加附加信息

分为四个步骤：
1、获取选择的对象；
2、设置要添加的内容；
3、创建一个div，将选择的对象和要添加的内容放进创建的div（innerHTML）；
4、把div的所有子节点作为选中区域，并取消之前的选中区域；
5、用户执行完复制操作，自动删除创建的div（用 setTimeout 实现）。

    document.oncopy = function () {
        //获取选择的对象
        var selection = window.getSelection();
        var part = "<br/>---------------------------" +
                "<br/>此文转载自<a href='www.baidu.com'>**的博客</a>>" +
                "<br/>---------------------------";
        var div = document.createElement("div");
        div.style = "position:absolute; opacity:0;z-index:-999;";
        div.innerHTML = selection + part;
        document.body.appendChild(div);
        selection.selectAllChildren(div);  //把指定元素的所有子元素作为选中区域，并取消之前的选中区域
        //复制完成之后删除创建的div
        setTimeout(function(){
            div.remove();
        },1000);
    };

daisy0328

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 中 DOM 元素的获取和相关操作——笔记整理0517

一、什么是DOM元素DOM (Document Object Model) 即文档对象模型。简称DOM 元素，即HTML元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。（引用自菜鸟）JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式Jav
复制链接

扫一扫