JavaScript

JavaScript 是一种脚本编程语言，它可以在网页上实现实时的内容更新。

直接写入 HTML 输出流:

document.write(“<h1>这是一个标题</h1>“);

document.write(“<p>这是一个段落。</p>“);

对事件的反应:

<button type="button" onclick="alert('欢迎!')">点我!</button>

改变 HTML 内容:

x=document.getElementById(“demo”); //查找元素
x.innerHTML=”Hello JavaScript”; //改变内容

改变 HTML 图像:

<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
element.src.match(“bulbon”) ：检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif

改变 HTML 样式（属于改变 HTML 属性的变种）:

x=document.getElementById(“demo”) //找到元素
x.style.color=”#ff0000”; //改变样式

验证输入:

if isNaN(x) {
alert(“不是数字”);
}

JavaScript 用法

HTML 中的 Javascript 脚本代码必须位于 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 和 部分中。

JavaScript 语法

JavaScript 变量

变量用于存储数据值。

使用关键字 var 来定义变量。

JavaScript 函数

调用函数(执行函数内的语句)。

事件监听程序

addEventListener() 方法

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

选取HTML元素

1.getElementById(id): 通过元素的 id 属性来选中元素。
var element = document.getElementById(“要选的元素”);
2.getElementsByClassName(name): 通过元素的 class 属性来选中元素。
var elements = document.getElementsByClassName(“要选的元素”);
3.getElementsByTagName(name): 通过元素的标签名来选中元素。
var elements = document.getElementsByTagName(“元素的标签名”);

添加/修改属性值

使用 Object.defineProperty
使用 Object.defineProperty() 函数可以为对象添加属性，或者修改现有属性。如果指定的属性名在对象中不存在，则执行添加操作；如果在对象中存在同名属性，则执行修改操作。
Object.defineProperty(object, propertyname, descriptor);
object：指定要添加或修改属性的对象，可以是 JavaScript 对象或者 DOM 对象。
propertyname：表示属性名的字符串。
descriptor：定义属性的描述符，包括对数据属性或访问器属性。

创建HTML标签

Document.createElement()
createElement(tagName) createElement(tagName, options)

添加属性

setAttribute()
element.setAttribute(attribute, value);
element是要添加属性的HTML元素对象，attribute是要添加的属性名，value是要设置的属性值。
将元素添加到DOM中
parentElement.appendChild()