1、输出文本：
<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>
2、修改HTML元素：
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
3、JavaScript 函数和事件
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>
4、HTML DOM Document 对象：
HTML DOM 节点：每一个元素都是节点（如：元素节点，文本节点，属性节点, 注释节点）
Document 对象：当浏览器载入 HTML 文档, 它就会成为 document 对象。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
Document 对象属性和方法
document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()是HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
如：document.querySelector("p.example");表示获取文档中class="example"的第一个<p>元素
实例（如果有多个选择器会是什么效果）：
<h2> h2 元素</h2>
<h3> h3 元素</h3>
<script>
document.querySelector("h2, h3").style.backgroundColor = "red";
</script>
从运行结果看，只有h2标签会是红色背景。如果我们将h2标签放在h3的后面，结果将会是h3是红色背景。
document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
document.cookie 设置或返回与当前文档有关的所有cookie。
document.createAttribute() 创建一个属性节点
document.createElement() 创建元素节点。
document.createTextNode() 创建文本节点。
document.createComment() 创建注释节点。
如：
<style type="text/css">
.democlass {
color:red;
}
</style>
<h1>Hello World</h1>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var h1=document.getElementsByTagName("H1")[0];
var att=document.createAttribute("class");
att.value="democlass";
h1.setAttributeNode(att);
}
</script>
点击按钮，h1的样式会变色红色。
如：创建一个span元素节点
eg：document.createElement('span');
如：var h=document.createElement("H1");
var t=document.createTextNode("Hello World");
h.appendChild(t);
document.documentElement 返回文档的根节点
document.write() 向文档写 HTML 表达式 或 JavaScript 代码。
document.writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
5、HTML DOM 对象：
DOM 是 Document Object Model（文档对象模型）的缩写。
element.addEventListener() 向指定元素添加事件句柄
element.removeEventListener() 移除由 addEventListener() 方法添加的事件句柄
语法：element.addEventListener(event, function, useCapture)
event：指定事件名
function：事件触发时执行的函数
useCapture：可选，指定事件是否在捕获或冒泡阶段执行
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
element.appendChild() 为元素添加一个新的子元素
element.attributes 返回一个元素的属性数组
element.childNodes 返回元素的一个子节点的数组
element.getAttribute() 返回指定元素的属性值
element.getAttributeNode() 返回指定属性节点
element.getElementsByTagName() 返回指定标签名的所有子元素集合。
element. getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
element.querySelector() 返回匹配指定 CSS 选择器元素的第一个子元素
element.innerHTML 设置或者返回元素的内容。
6、HTML DOM 属性 对象
attr.name 返回属性名称
attr.value 设置或者返回属性值
7、HTML DOM 事件
鼠标事件：
onclick 当用户点击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseup 鼠标按键被松开。
8、JavaScript RegExp 对象
\s : 空格
\S : 非空格
\d : 数字
\D : 非数字
\w : 字符 ( 字母 ，数字，下划线_ )
\W : 非字符例子：是否有不是数字的字符
RegExp 对象方法
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。
支持正则表达式的 String 对象的方法
search 检索与正则表达式相匹配的值。 （搜索到就返回出现的位置，失败为－1）
match 找到一个或多个正则表达式的匹配。（搜索成功就返回内容，格式为数组，失败就返回null）
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。
eg:
var str = 'abcdef';
// 找字母b，且不区分大小写
var re = /B/i;
alert( str.search(re) ); // 1(出现的位置,只会返回第一个字母的位置)
eg：
var str = "我爱北京天安门，天安门上太阳升。";
var re = /北京|天安门/g; // 找到北京 或者天安门 全局匹配
var str2 = str.replace(re,'*');
alert(str2) //我爱**，*上太阳升
如果想实现“我爱*****，***上太阳升”只需要用回调函数实现
str.replace(re,function(str){
var result = '';
...
return result;
});
网友评论