乐趣区

关于前端:JavaScriptDOM和BOM

DOM

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

BOM

通过浏览器对象模型(BOM),JavaScript 能够与浏览器进行对话。

1. 查找元素

  • 通过 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 = "<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;}

3. 事件

事件处理程序

如,鼠标点击事件:

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);

4. 定时器

一次性

  • 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>

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

6. history

  • history.back():加载历史列表中的前一个 URL。
  • history forward():加载历史列表中的下一个 URL。
退出移动版