关于前端:JavaScriptDOM和BOM

DOM

当网页被加载时，浏览器会创立页面的文档对象模型（DOM）。通过 DOM，JavaScript 可能拜访和扭转页面元素。

BOM

通过浏览器对象模型（BOM），JavaScript 能够与浏览器进行对话。

通过 id 查找，找不到时返回 null
```
var e = document.getElementById("intro");
```
依据标签名查找，返回一个汇合（如果找不到，则汇合为空）
```
var ps = document.getElementsByTagName("p"); 
```
依据类名查找，返回一个汇合（如果找不到，则汇合为空）
```
var intros = document.getElementsByClassName("intro");
```

依据选择器查找

// 找到第一个满足条件的元素，找不到时返回 null
var x = document.querySelector("p.intro");

// 找到所有满足条件的元素，返回一个列表（如果找不到，则列表为空）var xs = document.querySelectorAll("p.intro");

上述例子是在文档中查找元素，所以指定为 document，也能够在指定父元素中查找：

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

元素内容

var p1 = document.querySelector("#p1");

console.log(p1.innerText);        // 文本内容
console.log(p1.innerHTML);        // html 内容

p1.innerHTML = "<b>Hello, DOM!</b>"

元素属性

var img = document.querySelector("#image");

console.log(img.src);

img.src = "/i/porsche.jpg";

CSS 款式

间接批改 style 属性：

document.getElementById('id1').style.color = 'red';

通过批改元素的类名来扭转其 CSS 款式：

document.getElementById('id1').className='btn';

.btn {color: blue;}

事件处理程序

如，鼠标点击事件：

document.getElementById("myBtn").onclick = displayDate;

或：

<h1 onclick="changeText(this)"> 点击此文本！</h1>

<script>
function changeText(e) {e.innerHTML = "Hello:)";
}
</script>

也能够通过注册事件监听器来处理事件：

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {alert ("Hello World!");
}

事件流传

在 DOM 中有两种事件流传的办法，通过 addEventListener() 的第三个参数来批示

冒泡（false）：最内侧元素的事件会首先被解决，而后是更外侧的；
捕捉（true）：最外侧元素的事件会首先被解决，而后是更内侧的。

document.getElementById("myP").addEventListener("click", myFunction, true);

移除事件处理器

document.getElementById("myDIV").onmousemove = myFunction;
// 或
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

一次性

t1 = setTimeout(f, ms)：ms 毫秒后执行函数 f。
clearTimeout(t1)：在到期之前进行定时器 t1。

间隔性

t2 = setInterval(f, ms)：每过 ms 毫秒便执行函数 f。
clearInterval(t2)：进行定时器 t2。

var t = setInterval(myTimer, 1000);

function myTimer() {var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();}

<button onclick="clearInterval(t)"> 进行工夫 </button>

location.href：用于获取或批改以后页面的 URL。

var url = location.href;

location.href = "https://www.baidu.com";    // 会放弃浏览历史

location.replace()：替换以后页面，不会放弃上次的浏览记录（已被替换）。
```
location.replace("https://fanyi.sogou.com/")
```

location.reload()：从新加载页面。

location.reload();
location.reload(true);    // 不应用之前的缓存

history.back()：加载历史列表中的前一个 URL。
history forward()：加载历史列表中的下一个 URL。

关于前端:JavaScriptDOM和BOM

1. 查找元素

2. 操作元素

3. 事件

4. 定时器

5. location

6. history