JavaScript—DOM和BOM JavaScript—DOM和BOM

DOM
当网页被加载时，浏览器会创建页面的文档对象模型（DOM）。通过 DOM，JavaScript 能够访问和改变页面元素。
BOM
通过浏览器对象模型（BOM），JavaScript 可以与浏览器进行对话。
1. 查找元素

【JavaScript—DOM和BOM】通过 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");

2. 操作元素元素内容

var p1 = document.querySelector("#p1"); console.log(p1.innerText); // 文本内容 console.log(p1.innerHTML); // html内容p1.innerHTML = "Hello, DOM!"

元素属性

var img = document.querySelector("#image"); console.log(img.src); img.src = "https://www.it610.com/i/porsche.jpg";

CSS样式

直接修改 style 属性：

document.getElementById('id1').style.color = 'red';
通过修改元素的类名来改变其 CSS 样式：

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

.btn { color: blue; }

3. 事件事件处理程序
如，鼠标点击事件：

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

或：

点击此文本！

也可以通过注册事件监听器来处理事件：

document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); }

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

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

移除事件处理器

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

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

4. 定时器一次性

间隔性

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

5. location

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); // 不使用之前的缓存