JavaScript学习总结（三）—— DOM

最新推荐文章于 2024-07-12 16:27:40 发布

Enter°

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量244

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44557024/article/details/103687574

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、简介

DOM：document object model 文档对象模型。DOM是把HTML里面的各种数据当作对象进行操作的一种思路。HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM把HTML文档表达成一个节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改查找等功能。
HTML DOM树：

在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

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

二、DOM元素的获取

1.四种动态获取方式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button class="btn" name="but" id="btn_1">按钮</button>
    <button class="btn" name="but">按钮2</button>
    <script>
   		 // 1.通过标签名查找元素
        var dom1=document.getElementsByTagName("button");
        console.log(dom1);//HTMLCollection集合  使用[index]索引获取元素
        // 2.通过类名查找元素
        var dom2=document.getElementsByClassName("btn");
        console.log(dom2);//HTMLCollection集合 使用[index]索引获取元素
        // 3.通过name查找元素
        var dom3=document.getElementsByName("but");
        console.log(dom3);//NodeList集合  使用[index]索引获取元素
        // 4.通过id查找元素
        var dom4=document.getElementById("btn_1");
        console.log(dom4);//objiect类型 单个对象
    </script>
</body>
</html>

2.两种固定获取方式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button class="btn">按钮</button>
    <button class="btn">按钮2</button>
    <script>
   		 // 1.querySelector()方法只能返回指定选择器的第一个元素
        var querybtn=document.querySelector(".btn");
        console.log(querybtn);//单个对象
       	// 2.querySelectorAll()方法返回初始化页面所有的匹配元素，后期动态添加的不能直接获取
        var queryall=document.querySelectorAll(".btn");
        console.log(queryall);//NodeList集合  使用[index]索引获取元素
    </script>
</body>
</html>

3.两种固定元素的获取

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button class="btn" name="but" id="btn_1">按钮</button>
    <button class="btn">按钮2</button>
    <script>
        // 1.body元素
        console.log(document.body);
        // 2.html元素
        console.log(document.documentElement)
    </script>
</body>
</html>

三、DOM改变HTML和CSS

1.改变HTML

改变HTML内容
document.getElementById(id).innerHTML=新的 HTML
改变HTML属性
document.getElementById(id).attribute=新属性值

<!DOCTYPE html>
<html>
<body>
<h1 id="demo">Hellow!</h1>
<a id="demo1" href="https://www.baidu.com">点击这个连接</a>
<script>
// 1.改变元素内容
var element=document.getElementById("demo");
element.innerHTML="Thanks!";
// 2.改变元素内容
var element1=document.getElementById("demo1");
element1.href="https://weibo.com";
</script>
</body>
</html>

2.改变css

改变HTML样式
document.getElementById(id).style.property=新样式

<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
	document.getElementById("p1").style.color="blue";
</script>

四、DOM事件

1. DOM元素添加事件的3种方案

DOM元素中直接绑定事件

<p id="demo"></p>
<button onclick="displayDate()">点击显示当前时间</button>

function displayDate(){
        document.getElementById("demo").innerHTML=new Date();
}

js中获取DOM元素动态绑定事件

<p id="demo"></p>
<button id="btn">点击显示当前时间</button>

var btn=document.getElementById("btn");
btn.onclick=function () {
	document.getElementById("demo").innerHTML=new Date();
}

事件的监听

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个事件句柄。
可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强,在没HTML标记时也可以添加事件监听。
可以使用 removeEventListener() 方法来移除事件的监听。

添加事件句柄

<p id="demo"></p>
<button id="btn">点击显示当前时间</button>

var btn=document.getElementById("btn");
btn.addEventListener("click",displayDate);
function displayDate(){
	document.getElementById("demo").innerHTML=new Date();
}

向同一个元素中添加多个事件句柄:

<p id="demo"></p>
<button id="btn">点击显示当前时间</button>

var btn=document.getElementById("btn");
btn.addEventListener("click",displayDate);
btn.addEventListener("click",myFunction);
function displayDate(){
	document.getElementById("demo").innerHTML=new Date();
}
function myFunction(){
	alert("函数已执行")
}

事件冒泡和事件捕获
事件传递有两种方式：冒泡和捕获。

  事件传递定义了元素事件触发的顺序。
  在冒泡中，内部元素的事件会先被触发，然后再触发外部元素。
  在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
	//第三个参数  捕获/冒泡
	//第三个参数默认为false 冒泡    true 捕获
	//e.stopPropagation();  阻止事件冒泡
	document.getElementById("myP").addEventListener("click", function(e) {
	    alert("你点击了 P 元素!");
	    //e.stopPropagation();
	}, false);
	document.getElementById("myDiv").addEventListener("click", function() {
	    alert(" 你点击了 DIV 元素 !");
	    //e.stopPropagation();
	}, false);
	document.getElementById("myP2").addEventListener("click", function() {
	    alert("你点击了 P2 元素!");
	}, true);
	document.getElementById("myDiv2").addEventListener("click", function() {
	    alert("你点击了 DIV2 元素 !");
	}, true);
</script>

</body>
</html>

移除由addEventListener() 方法添加的事件句柄

<p id="demo"></p>
<button id="btn">点击显示当前时间</button>

var btn=document.getElementById("btn");
btn.addEventListener("click",displayDate);
function displayDate(){
	document.getElementById("demo").innerHTML=new Date();
	btn.addEventListener("click",displayDate);
}

2.事件的委托

事件委托：给父元素绑定事件，用来监听子元素的冒泡事件。也就是事件目标（子元素）不处理事件，把事件委托给父元素去处理。
事件委托的好处：不需要对每一个子元素绑定事件，只需要在父元素上绑定事件，减少了操作DOM节点的次数，从而减少浏览器的重加载，提高代码的性能。

<!doctype html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
<script>
    var ul = document.querySelector("ul");
    var li = document.querySelectorAll("li");
    ul.onclick = function(e){//e指event,事件对象
        var target = e.target || e.srcElement; //target获取触发事件的目标(li)
        if(target.nodeName.toLowerCase() == 'li'){//目标(li)节点名转小写字母，不转的话是大写字母
            alert(target.innerHTML)
        }
    }
</script>
</body>
</html>

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
标准 Event 属性：target 返回触发此事件的元素（事件的目标节点）。
IE 属性：srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。

五、DOM操作

1.DOM元素节点操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p id="p1">1</p>
    <p id="p2">1</p>
    <p id="p3">段落</p>
</div>
<script>
	//createElement()用于创建元素
    var para1=document.createElement("p");
    var para2=document.createElement("p");
    var header=document.createElement("h3");
    var child1=document.getElementById("p1");
    var child1=document.getElementById("p2");
    //innerHTML设置元素html文本
    para1.innerHTML=2;
    para2.innerHTML=3;
    header.innerHTML="标题";
    var element=document.getElementsByTagName("div")[0];
    //appendChild()用于将新元素添加到尾部
    element.appendChild(para1);
    //insertBefore(新元素，已存在的元素)用来将新元素插入到某一元素之前
    element.insertBefore(para2,child1);
    //removeChild()用于删除一个元素
    element.removeChild(child2);
    //replaceChild(新元素，已存在的元素)用于替换元素
    element.replaceChild(header,child3);
</script>
</body>
</html>

2.获取dom元素节点

element.childNodes[index].nextSibling  返回下一个节点同胞元素
element.childNodes[index].previousSibling 返回上一个节点同胞元素
element.childNodes[index].nextElementSibling 返回下一个同胞元素
element.childNodes[index].previousElementSibling  返回上一个同胞元素
element.childNodes[index].parentElement 获取当前节点的父元素

element.children 获取当前元素的所有子元素
element.firstChild 获取的是第一个节点
element.lastChild 获取的是第一个节点
element.firstElementChild 获取的是第一个元素
element.lastElementChild 获取的是第一个元素
element.childElementCount 获取当前子元素的个数

3.获取和设置属性

btn.setAttribute("属性名",属性值) //设置属性
btn.getAttribute("属性名") //获取属性

Enter°

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习总结（三）—— DOM

一、简介DOM：document object model 文档对象模型。DOM是把HTML里面的各种数据当作对象进行操作的一种思路。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM把HTML文档表达成一个节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改查找等功能。HTML DOM树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态...
复制链接

扫一扫