BOM

一、改变 HTML

1.改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

document.write(Date());

2.改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>

3.改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值
<script>
document.getElementById("image").src="landscape.jpg";
</script>

二、HTML DOM - 改变CSS

1.改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式
<script>
document.getElementById("p2").style.color="blue";
</script>

2.使用事件

HTML DOM 允许我们通过触发事件来执行代码。

<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

3.Visibility

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

三、HTML DOM 事件

1.

onclick=JavaScript

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

2.

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

3.

<button onclick="displayDate()">点这里</button>

4.

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

四、HTML DOM EventListener

1.addEventListener() 方法

element.addEventListener(event, function, useCapture);

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

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

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

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

2.removeEventListener() 方法

 

 

posted @ 2016-08-13 14:06  vervin  阅读(356)  评论(0)  编辑  收藏  举报