DOM

# DOM

# Element

# 方法-01

# getAttribute()-返回属性值

getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）；

let div1 = document.getElementById("div1");
let align = div1.getAttribute("align");

alert(align);
// shows the value of align for the element with id="div1"

1
2
3
4
5

# String

# indexOf()-查找字符串

# slice(startnub[,endnub])-提取字符串

# toLowerCase()和toUpperCase()-转换大小写

# replace('moz','van')-代替字符串内容

# split([","])-拆分为数组

let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
let myArray = myData.split(',');
myArray;

1
2
3

# 相反操作

let myNewString = myArray.join(',');
myNewString;

1
2

# Array

# push()-结尾添加元素

# pop()-结尾删除元素

# unshift()-开头添加元素

# shift()-开头删除元素

# 事件-03

# e-事件对象

在这里，您可以看到我们在函数中包括一个事件对象e，并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身。事件对象 e 的target属性始终是事件刚刚发生的元素的引用。所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。

# 冒泡阶段和捕获阶段

当一个事件发生在具有父元素的元素上(例如，在我们的例子中是<video>元素)时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段：

浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反:

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。

解决方法

 e.stopPropagation();

阻止冒泡行为

# preventDefault()-阻止默认行为

# Document

# DOMContentLoaded-加载

“内部”示例使用了以下结构：

document.addEventListener("DOMContentLoaded", function() {
  . . .
});

1
2
3

这是一个事件监听器，它监听浏览器的 "DOMContentLoaded" 事件，即 HTML 文档体加载、解释完毕事件。事件触发时将调用 " . . ." 处的代码，从而避免了错误发生

DOM