DOM 文档对象模型

DOM: Document Object Model 文档对象模型

作用：操作网页中各种元素，可能通过修改DOM树来实现修改网页结构的目的

Document：文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Element查找节点的方法

获取元素的方法	作用
document.getElementById(“id”)	通过id得到一个元素
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过css选择器获取一个元素，如："#id" “.类名” “标签名”
document.querySelectorAll(CSS选择器)	通过css选择器获取一组元素

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = div1.parentElement;
    alert(body);
</script>

创建元素的方法

创建元素的方法	作用
document.createElement(“标签名”)	创建一个元素

修改DOM树的方法

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	将元素追加成最后一个子元素
父元素.removeChild(子元素)	通过父元素删除子元素(他杀)
元素.remove()	删除自己(自杀)

元素属性操作

获取元素本身
添加属性：setAttribute(“属性名”， “属性值”)
获取属性：getAttribute(“href”);
删除属性：removeAttribute(“属性名”)

style他是Element的属性，但style本身也是一个对象

<body>
    <a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

    //2. getAttribute()    获取属性
    let value = a.getAttribute("href");
    //alert(value);

    //3. removeAttribute()  删除属性
    //a.removeAttribute("href");

    //4. style属性   添加样式
    //a.style.color = "red";

    //5. className属性   添加指定样式
    a.className = "aColor";
</script>

innerHTML和innerText的区别

innerHTML: 标签体内的子标签是起作用的
innerText：标签体内的文字是纯文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerText和innerHTML的区别</title>
</head>
<body>
<input type="button" value="改内容" id="btn">
<hr/>
<span id="content"></span>

<script type="text/javascript">
     document.getElementById("btn").onclick = function () {
    
    
         //innerText：修改是纯文本的内容，如果内容中有标签，标签是不起作用
         //document.getElementById("content").innerText = "<h1 style='color: red'>幸福来敲门</h1>";
         //innerHTML：修改是HTML的内容，标签是起作用
         document.getElementById("content").innerHTML = "<h1 style='color: red'>幸福来敲门</h1>";
     }
</script>
</body>
</html>

事件

能够使用JS中常用的事件

事件名	作用
onclick	单击
ondblclick	双击
onload	加载完毕
onfocus	得到焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。

方式一通过标签中的事件属性进行绑定。

方式二通过 DOM 元素属性绑定。

JS面向对象

类的定义

类的使用

let 对象名 = new 类名();

对象名.变量名

对象名.方法名()

字面量定义类和使用

<script>
    //定义person
    let person = {
    
    
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],

        eat : function() {
    
    
            document.write("吃饭...");
        }
    };

    //使用person
    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
    person.eat();
</script>

内置对象

Number

内置对象：数学对象

方法名	作用
round(x)	四舍五入保留到整数
floor(x)	向下取整
ceil(x)	向上取整
random()	随机生成0~1之间的小数，不等于1document.write(Number.isNaN(NaN))//这样比较时候相同

<script>
    //1. ceil(x) 向上取整
    document.write(Math.ceil(4.4) + "<br>");    // 5
    
    //2. floor(x) 向下取整
    document.write(Math.floor(4.4) + "<br>");   // 4
    
    //3. round(x) 把数四舍五入为最接近的整数
    document.write(Math.round(4.1) + "<br>");   // 4
    document.write(Math.round(4.6) + "<br>");   // 5
    
    //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
    document.write(Math.random() + "<br>"); // 随机数
    
    //5. pow(x,y) 幂运算 x的y次方
    document.write(Math.pow(2,3) + "<br>"); // 8
</script>

字符串转为数字	说明
parseInt(字符串)	转成整数
parseFloat(字符串)	转成小数
isNaN(字符串)	判断非数字

<script>
    //1. parseFloat()  将传入的字符串浮点数转为浮点数
    document.write(Number.parseFloat("3.14") + "<br>");

    //2. parseInt()    将传入的字符串整数转为整数
    document.write(Number.parseInt("100") + "<br>");
    document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换，直到不是数字为止
document.write(Number.isNaN(NaN))//这样比较时候相同
</script>

Date

getFullYear()：年份

getDay()：周几

getTime()：得到1970-1-1到现在的毫秒数

toLocaleString() ：本地格式的日期

<script>
    //构造方法
    //1. Date()  根据当前时间创建对象
    let d1 = new Date();
    document.write(d1 + "<br>");

    //2. toLocaleString() 返回本地日期格式的字符串
    document.write(d1.toLocaleString()+"<br>");

    //成员方法
    //1. getFullYear() 获取年份
    document.write(d1.getFullYear() + "<br>");

    //2. getMonth() 获取月份  外国月份从0开始算
    document.write(d1.getMonth() + "<br>");

    //3. getDate() 获取天数
    document.write(d1.getDate() + "<br>");
</script>

成员方法说明
getFullYear() 获取年份
getMonth() 获取月份
getDate() 获取天数
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒数
getTime() 返回据1970年1月1日至今的毫秒数
toLocaleString() 返回本地日期格式的字符串

String

String(value) 根据指定字符串创建对象
let s = “字符串” 直接赋值

方法名	作用
substring(startIndex,endIndex)	取子字符串，包头不包尾，索引从0开始。参数是起始位置
substr(startIndex, length)	取子字符串，起始位置，长度
split(delimiter)	把一个字符串使用指定的分隔符，切割成一个数组
toLowerCase()	变成小写
toUpperCase()	变成大写
trim()	去掉前后的空格

<script>
    //1. 构造方法创建字符串对象
    let s1 = new String("hello");
    document.write(s1 + "<br>");

    //2. 直接赋值
    let s2 = "hello";
    document.write(s2 + "<br>");

    //属性
    //1. length   获取字符串的长度
    document.write(s2.length + "<br>");

    //成员方法
    //1. charAt(index)     获取指定索引处的字符
    document.write(s2.charAt(1) + "<br>");

    //2. indexOf(value)    获取指定字符串出现的索引位置
    document.write(s2.indexOf("l") + "<br>");

    //3. substring(start,end)   根据指定索引范围截取字符串(含头不含尾)
    document.write(s2.substring(2,4) + "<br>");

    //4. split(value)   根据指定规则切割字符串，返回数组
    let s3 = "张三,23,男";
    let arr = s3.split(",");
    for(let i = 0; i < arr.length; i++) {
    
    
        document.write(arr[i] + "<br>");
    }

    //5. replace(old,new)   使用新字符串替换老字符串
    let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
    let s5 = s4.replace("你妹的","***");
    document.write(s5 + "<br>");
</script>

RegExp正则表达式

正则表达式：是一种对字符串进行匹配的规则

符号	作用
[a-z]	中括号表示1个字符，a-z中任意一个字符
[xyz]	x或y或z，三个字符一个
[^xyz]	除了xyz之外的任意字符
\d	数字
\w	单词，相当于[a-zA-Z0-9_]
.	任意字符，如果要匹配点号需要转义 \.
()	分组
{n}	前面的字符出现n次
{n,}	前面的字符出现大于等于n次
{n,m}	前面的字符出现n次到m之间的次数，包头包尾
+	前面的字符出现1~n次
*	前面的字符出现0~n次
?	前面的字符出现0~1次
\|	多组字符串选择1个
^	匹配开头
$	匹配结尾

<script>
    //1.验证手机号
    //规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
    let reg1 = /^[1][358][0-9]{9}$/;
    document.write(reg1.test("18688888888") + "<br>");

    //2.验证用户名
    //规则：字母、数字、下划线组成。总长度4~16
    let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg2.test("zhang_san123")+ "<br>");

    let reg3=/^[1][358][0-9]{9}$/;
    document.write(reg3.test("13888888888")+ "<br>")

    let reg4=/^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg4.test("fdfd4F4DS5"))
</script>

Array数组

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	将数组接拼接成一个字符串
sort()	排序
pop()	删除最后一个元素
push()	添加元素到数组末尾
shift()	删除最前一个元素
includes(元素)	判断数组是否包含指定元素

Set

JavaScript 中的 Set 集合，元素唯一，存取顺序一致。

构造方法

成员方法

add(元素) 向集合中添加元素
size属性获取集合长度
keys() 获取迭代器对象
delete(元素) 删除指定元素

<script>
    // Set()   创建集合对象
    let s = new Set();
    // add(元素)   添加元素
    s.add("a");
    s.add("b");
    s.add("c");
    s.add("c");
    // size属性    获取集合的长度
    document.write(s.size + "<br>");    // 3
    // keys()      获取迭代器对象
    let st = s.keys();
    for(let i = 0; i < s.size; i++){
    
    
        document.write(st.next().value + "<br>");
    }
    // delete(元素) 删除指定元素
    document.write(s.delete("c") + "<br>");
    let st2 = s.keys();
    for(let i = 0; i < s.size; i++){
    
    
        document.write(st2.next().value + "<br>");
    }
</script>

Map

JavaScript 中的 Map 集合，key 唯一，存取顺序一致。

构造方法说明
Map() 创建Map集合对象

成员方法说明
set(key,value) 向集合中添加元素
size属性获取集合长度
get(key) 根据key获取value
entries() 获取迭代器对象
delete(key) 根据key删除键值对

<script>
    // Map()   创建Map集合对象
    let map = new Map();
    // set(key,value)  添加元素
    map.set("张三",23);
    map.set("李四",24);
    map.set("李四",25);
    // size属性     获取集合的长度
    document.write(map.size + "<br>");
    // get(key)     根据key获取value
    document.write(map.get("李四") + "<br>");
    // entries()    获取迭代器对象
    let et = map.entries();
    for(let i = 0; i < map.size; i++){
    
    
        document.write(et.next().value + "<br>");
    }
    // delete(key)  根据key删除键值对
    document.write(map.delete("李四") + "<br>");
    let et2 = map.entries();
    for(let i = 0; i < map.size; i++){
    
    
        document.write(et2.next().value + "<br>");
    </script>

JavaScript＆DOM文档对象模型