1、Dom (找到html中的标签)
2、Javascirpt(正则)
3、jQuery(1.10,1.12-兼容性好，2.0。以后放弃了ie9以下)
- 封装了Dom & JavaScript
1、查找元素
document.getElementById 根据ID获取一个标签 --->这里是获取一个标签中间没有s document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合/ 兼容性不太好 ----> 这些都是获取多个标签中间有s document.getElementsByTagName 根据标签名获取标签集合
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点
#以上的nodes既包含标签，也包含文本内容
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
只包含标签
直接查找：
Nodes包含了所有子节点。
2、操作
a、获取和修改
t = document.getElementById("i2")
<div id=?"i2">?…?</div>?
t.children
[<input type=?"text">?]
text = t.children[0]
<input type=?"text">?
text.value
""
text.value //获取当前input框中输入的值
"123"
text.value = 345 //设置input框中的值
345
使用innetText或者innerHTML这两个标签
innetText
t = document.getElementById("i3")
<a id=?"i3" href=?"http:?/?/?www.baidu.com">?百度?</a>?
t.innerText //获取a标签中的内容
"百度"
t.innerText = "是百度" //设置a标签中的内容，让其在页面上变化
"是百度"
innerHTML
<a id="i3" href="http://www.baidu.com">百<span>666</span>度</a>
t = document.getElementById("i3") <a id=?"i3" href=?"http:?/?/?www.baidu.com">?…?</a>? t.innerText "百666度" t.innerHTML "百<span>666</span>度" HTML会将文本中的所有标签都拿到
实例一：搜索框中的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框文字消失</title>
</head>
<body>
<input id="i1" type="text" value="请输入搜索内容" onfocus="Focus();" onblur="Blur()"/> //onfocus:获取鼠标点击时的动作， onblur:获取鼠标移除时的动作
<script type="text/javascript">
function Focus() {
var tag = document.getElementById("i1"); //获取id=i1的标签
if(tag.value=="请输入搜索内容"){ //如果这个表亲的内容是请输入请输入搜索内容，一点就清空，否则就不管
tag.value = "";
}
}
function Blur() {
var tag = document.getElementById("i1");
var tag_value = tag.value;
if (tag_value.trim().length==0){ //如果搜索框去空格后的长度是0，就证明用户没有输入，那么就将内容恢复
tag.value = "请输入搜索内容";
}
}
</script>
</body>
</html>
b、class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
实例二:摸态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>莫泰对话框</title>
<style>
.hide{
display: none !important;
/*定义一个display = none的标签，让后面使用*/
}
.b{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
z-index: 9;
}
.modal{
height: 200px;
width: 400px;
background-color: lightskyblue;
position: fixed;
z-index: 10;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
.out_input{
margin-left: 98px;
height: 100px;
margin-top: 10px;
}
.d_input{
display: inline-block;
width: 173px;
height: 21px;
margin-top: 10px;
}
.login_back{
height: 50px;
width: 204px;
background-color: dodgerblue;
margin: 0 auto;
text-align: center;
line-height:50px;
border: 1px darkblue solid;
}
input{
width: 200px;
height: 30px;
}
.login_icon{
top: 16px;
left: 68px;
float: inherit;
}
.modal_in{
height: 30px;
width: 100px;
float:right;
}
</style>
</head>
<body>
<input class="reg" type="button" value="登陆" onclick="ShowModal();">
<!--一旦点击这个button按钮，onclick，就触发showmodal这个js函数-->
<div id ="black" class="b hide"></div>
<!--让背景这个样式使用两个类属性，一个是颜色，布局，一个就是隐藏，现不显示出来-->
<div id ="mod" class="modal hide">
<!--让中间整个的这个模块使用两个类属性，一个是颜色，布局，一个就是隐藏，现不显示出来-->
<div class="login_back">
<span class="login_icon">
账户登陆
</span>
</div>
<div class="out_input">
<input type="text"/>
<span class="input_imp"></span>
<span class="d_input">
<input type="text" class="input_d"/>
<span class="input_imp"></span>
</span>
</div>
<button class="modal_in" onclick="HideModal();">返回</button>
<!--一旦点击这个button按钮，onclick，就触发HideModal这个js函数-->
</div>
<script>
function ShowModal() {
var t1 = document.getElementById("black");
var t2 = document.getElementById("mod");
//<div id="black" class="b"></div>
//<div id="mod" class="modal"></div>
t1.classList.remove("hide"); //移除tag1这个list中的class：hide
t2.classList.remove("hide"); //移除tag2这个list中的class: hide
}
function HideModal() {
var t1 = document.getElementById("black");
var t2 = document.getElementById("mod");
//<div id="black" class="b hide"></div>
//<div id="mod" class="modal hide"></div>
t1.classList.add("hide"); //移除tag1这个list中的class：hide
t2.classList.add("hide"); //移除tag2这个list中的class: hide
}
</script>
</body>
</html>
小知识点：
<a href="javascript:void (0)">取消</a> //表示这个a标签什么都不做
python_way day16 JavaScirpt（re）、 DOM 、 jQuery、
原文：http://www.cnblogs.com/python-way/p/5797531.html