学习笔记-js-2017.2.24

JS HTML DOM

一、HTML DOM (文档对象模型)

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

1、通过 id 查找 HTML 元素

你好世界

2、通过标签名查找 HTML 元素

    
123

3、通过类名找到 HTML 元素

123

二、改变 HTML

1、改变 HTML 输出流

2、改变 HTML 内容

123

3、改变 HTML 属性

三、HTML DOM - 改变CSS

1、语法

document.getElementById(id).style.property=新样式

123
123

2、通过触发事件来执行代码。

123
点击

四、HTML DOM 事件

1、在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码。

surprise

2、从事件处理器调用一个函数：

surprise

3、使用 HTML DOM 来分配事件

点击
    
    

4、onload 和 onunload 事件

5、onchange 事件

6、onmouseover 和 onmouseout 事件

把鼠标移到上面

7、onmousedown、onmouseup 以及 onclick 事件

把鼠标移到上面

8、onfocus

五、HTML DOM EventListener

1、addEventListener() 方法

点击

2、语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

3、向原元素添加事件句柄

点击
    

4、向同一个元素中添加多个事件句柄

这是我想说的话
    

5、传递参数

点击