发表于: 2018-08-16 21:22:50

1 693


今天完成的事情:讲了小课堂,看了一点js知识。

明天计划的事情:尝试任务1 

遇到的问题:不会上传小课堂,靠师兄帮助。

收获:

基本概念


DOM

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。


浏览器会根据 DOM 模型,将结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。所以,DOM 可以理解成网页的编程接口。DOM 有自己的国际标准,目前的通用版本是DOM 3,下一代版本DOM 4正在拟定中。


严格地说,DOM 不属于 JavaScript,但是操作 DOM 是 JavaScript 最常见的任务,而 JavaScript 也是最常用于 DOM 操作的语言。本章介绍的就是 JavaScript 对 DOM 标准的实现和用法。



节点

DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。

:整个文档树的顶层节点

:标签(比如)

:网页的各种HTML标签(比如、等)

:网页元素的属性(比如

:标签之间或标签包含的文本

:注释

:文档的片段

DOM:通过ID,标签,名称,类,CSS选择器获取元素



click 与 onclick

1.onclick 事件会在对象被点击时发生。

<input id="btn1" type="button" onclick="test();" />
function test() {
    alert("我是行间事件");
}

当点击id="btn1"时,触发onclick事件

 

2.onclick事件会在click事件之前执行

<input id="btn2" type="button" onclick="test();" />
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  function showMsg() {
    alert("事件监听");
}

当点击id="btn2"时,先执行onclick事件的方法test(),再执行click事件的showMsg()方法;



返回列表 返回列表
评论

    分享到