WEB 学习第四天

发表于 更新于 分类于

DOM(文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model).

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML.

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找HTML元素

  • 通过 id 查找
    1
    var demo = document.getElementById("demo");
  • 通过标签名查找
    1
    var demo = document.getElementsByTagName("p");
  • 通过类名查找
    1
    var demo = document.getElementsByClassName("demo");

修改HTML内容

1
2
3
4
// 获取元素对象(集合)
var demo = document.getElementsByClassName("demo");
// 对元素的 innerHTML 属性赋值, (可读可写)
demo[0].innerHTML = "hello JavaScript!";

修改HTML属性

1
2
3
4
5
6
// 通过TagName获取元素对象集合
var imgobj = document.getElementsByTagName("img");
// 绑定onclick事件, 触发对应函数
imgobj[0].onclick = function () {
    imgobj[0].src = "./images/news.jpg";
}

未完待续…