JavaScript小白入门篇(三、高级语法之 DOM 详解)

程序员文章站 2022-05-08 16:09:44

...

嗨小伙伴们
学习了 JavaScript小白入门篇(一、基本语法详解)
JavaScript小白入门篇(二、高级语法之 BOM 详解)
之后,大家已经对JavaScript有了很深的了解了,那接下来我们就来学习JavaScript中的DOM复制

DOM 文档对象模型

1、概念
2、DOM的三个标准
3、核心DOM模型

1、Document: 文档对象
2、 Element: 元素对象
3、Node: 节点对象
4、Attribute：属性对象 Text：文本对象 Comment:注释对象

4、HTML DOM

5、事件监听机制

1、概念

2、DOM的三个标准

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

XML DOM、HTML DOM是对 核心DOM 的扩展和延伸,我们要学习HTML DOM 就要先学习 核心DOM。 XML DOM 我们今天先不学习以后再学

3、核心DOM模型

我们主要讲解前三个对象,另外三个了解一下

1、Document: 文档对象

1、创建/获取对象: 跟我们之前讲的差不多,在HTML DOM 模型中可以使用window对象来获取。
(1)、window.document
(2)、document (直接使用)

2、方法讲解 Document 对象的方法有很多,我们拿一些常用的来讲解,分为以下两类 get… create…

(1)、获取Element对象的方法
1.getElementById(): 根据id的属性值来获取元素对象,id就像我们学生在学校的学号一样,一般都是唯一的。

2.getElementsByTagName(): 根据元素的名称来获取元素对象, 调用这个方法返回的是一个数组。

3.getElementsByClassName(): 根据Class属性值来获取元素对象,调用这个方法返回的是一个数组。

4.getElementsByName():根据name属性值来获取元素对象调用这个方法返回的是一个数组。

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div class="class1">div4</div>
    <div class="class1">div5</div>
    <input type="text" name="username">
<script>
    var div = document.getElementsByTagName("div");
    var class1 = document.getElementsByClassName("class1");
    var ele_username = document.getElementsByName("username");
    var table = document.createElement("table");
    alert(div);
    alert(class1);
    alert(ele_username);
    alert(table);
</script>

演示结果会弹出四个警告框
JavaScript小白入门篇(三、高级语法之 DOM 详解)

(2)、创建其他DOM对象的方法

createAttribute( name ) 创建属性对象。
createComment( ) 创建注释对象。
createElement( ) 创建…
createTextNode( ) 创建…

小伙伴们可以自己进行创建其他DOM对象喔

2、 Element: 元素对象

1.创建/获取对象
根据上面我们了解到,可以通过Document文档对象来创建和获取Element对象
createElement( ) 、getElementById( )方法

2.方法
我们先介绍2个常见的方法,还有些方法下面在Node节点再介绍

removeAttribute()：删除属性
setAttribute()：设置属性

<body>
<input type="button" value="设置标签" id="btn1"> 
<!--设置按钮-->
<a>我是超链接</a>
<input type="button" value="取消标签" id="btn2">
<script>  <!--取消按钮-->
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function () {
        var tagName_a = document.getElementsByTagName("a")[0]; //返回的是一个数组,所以用[0] 来获取对象
        tagName_a.setAttribute("href","https://www.baidu.com"); //设置href属性 属性值为百度网址
    }
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function () {
        var tagName_a = document.getElementsByTagName("a")[0];
        tagName_a.removeAttribute("href"); //取消href属性
    }
</script>

演示截图
JavaScript小白入门篇(三、高级语法之 DOM 详解)

3、Node: 节点对象

Node节点对象是其他5个对象的父对象(document…),所以Node的很多属性和方法被它的子对象继承

Node对象的特点: 所有dom对象都可以被认为是一个节点
注意，虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如，文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致 DOM 错误。

方法
Node节点对象的方法也很多,我们主要讲一下增删查改
CRUD dom树

appendChild( )：向节点的子节点列表的结尾添加新的子节点。
removeChild( )：删除（并返回）当前节点的指定子节点。
replaceChild( )：用新节点来替换一个子节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node节点对象</title>
 <style>
        div{
            background-color: yellow;
        }
        #div1{
            background-color: red;
            width: 200px;
            height: 200px;
        }
        #div2{
            background-color: yellow;
            width: 100px;
            height: 100px;
        }
        #div3{
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>
<div id="div1">
    <div id="div2"></div>
</div>
<a href="javascript:void(0);" id="addNode">添加子节点</a>
<!--javascript:void(0)创建一个超链接，但是，在点击链接时，
既不能够跳转，也不会引起页面的刷新。-->
<a href="javascript:void(0);" id="deleteNode">删除子节点</a>
<script>
    var element_a = document.getElementById("deleteNode");
    element_a.onclick = function () {
            var div1 = document.getElementById("div1"); //获取div1对象
            var div2 = document.getElementById("div2");
            div1.removeChild(div2); // 删除div2 
    }
    var addNode = document.getElementById("addNode");
    addNode.onclick = function () {
        var div1 = document.getElementById("div1"); //返回div1
        var div3 = document.createElement("div"); // 创建一个div
        div3.setAttribute("id","div3"); ///设置div3的属性
        div1.appendChild(div3); //向div1 添加的子节点
    }
</script>
</body>

演示截图:
JavaScript小白入门篇(三、高级语法之 DOM 详解)

⚠️代码中没有设置删除div3的节点,所以删除不了蓝色的方块

属性：
parentNode 返回节点的父节点。

 var node = div3.parentNode;
 alert(node); //返回div1节点

4、Attribute：属性对象 Text：文本对象 Comment:注释对象

Attribute：属性对象,可以setAttribute createAttribute
Text 对象表示元素或属性的文本内容。
Comment 对象表示文档中注释节点的内容。

4、HTML DOM

什么是 HTML DOM？

HTML DOM 是：
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

也就是说，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 也有我们刚才介绍的核心DOM的东西,那接下来我们来介绍一点刚才没有介绍的东西,HTML DOM的知识还是比较多的,小伙伴们需要用到的时候可以查一下文档

标签体的设置和获取：innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
</head>
<body>
      <div id="div1">div</div>
        <script>
            var div = document.getElementById("div1");
            var innerHTML = div.innerHTML;
            div.innerHTML = "<input type='text' >";  // 将我们设置的div标签替换成一个文本输入框
            //为 div标签追加一个文本输入框
            div.innerHTML +="<input type='text'> ";
        </script>
</body>
</html>

演示截图
JavaScript小白入门篇(三、高级语法之 DOM 详解)

3.控制元素样式
(1) 、使用元素的style属性来控制元素样式

	 div1.style.border = "1px solid red"; //控制div1 的style 
	 div1.style.width = "50px";
  //font-size--> fontSize
  // background-color -> backgroundcolor
    div1.style.fontSize = "20px";

(2)、提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

提前设置好改class 的style属性值,然后定义ckassName属性来获取改属性值

        div1.className = "div2" ;

5、事件监听机制

事件监听机制概念: 简单的来理解就是某个组件被执行来某些操作后,触发某些代码的执行。
我们需要先了解以下名词概念

事件 : 指的是某些操作:
如: 单击、双击、键盘操作、鼠标操作
事件源: 指的是组件例如文本输入框,按钮等
监听器: 就是触发后执行的代码
注册监听 : 也就是将上面3种结合起来,完成某个组件被执行来某些操作后,触发某些代码的执行的 触发代码过程。

常见的事件有:
(1). 点击事件类：
1. onclick：单击事件
2. ondblclick：双击事件

(2). 焦点事件类
1. onblur：失去焦点
2. onfocus:元素获得焦点。

(3). 加载事件类：
1. onload：一张页面或一幅图像完成加载。

(4). 鼠标事件类：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。

(5). 键盘事件类：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。

(6). 选择和改变事件类
1. onchange 域的内容被改变。
2. onselect 文本被选中。

(7). 表单事件类：
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。

加载事件中的 onload 我们之前不是说过在符合语法的情况下可以放在任意位置吗? 但是放的位置会对

 window.onload = function() {
	<script>
	....
	</script>
}

接下来我们通过一个鼠标的事件来了解这些事件该怎么用

通过获取元素对象,然后调用我们需要的事件类,然后执行我们定义的function()

 document.getElementById("username").onmouseover = function () {//链式编程
                alert("鼠标在我身上");
            }

JavaScript小白入门篇(三、高级语法之 DOM 详解)

表单事件类讲讲表单事件,

第一种用法

....
<script>
windou.onload = function(){
///在这返回什么就决定表单是否被提交
 document.getElementById("form").onsubmit = function () {  
                    return true; //true 则表单被提交，false则不提交
            }
     }
</script>
<body>
<form action="#" id="form" onclick=" return checkform();">
</body>

...

第二种用法

.....
 <script>
 //先定义个方法
  function  checkform(){
            return true; // 返回true则提交,false则不提交表单
        }
    </script>
</head>
<body>
<form action="#" id="form" onclick=" return checkform();">//注意这里是return checkform();
//因为 调用checkform()返回的是true/false,然后我们要再将其 return 才能进行判断是否提交表单
...

好啦,那我们 JavaScript小白入门篇就结束啦,喜欢的朋友可以点赞支持一下,如果文章中有什么错误欢迎大家指出来,谢谢。

JavaScript小白入门篇(一、基本语法详解)
JavaScript小白入门篇(二、高级语法之 BOM 详解)