DOM：document operation model 文档操作模型
每个标签都是一个对象。
一、查找元素
DOM 回顾
直接查找
var obj = document.getElementById('i1')
document.getElementById('i1') 根据ID获取一个元素
document.getElementsByTagName('div') 根据标签名获取标签集合
document.getElementsByClassName('div') 获取class多个元素(列表)
document.getElementsByName
间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
文件内容操作：
innerText 仅文本
innerHTML 全内容
obj1.value
input value获取当前标签中的值
select 获取选中的value值
.selectedIndex
textarea value获取当前标签中的值
搜索框的示例
<body>
<div style=" 600px;margin: 0 auto;">
<!--不使用onclick监听，使用onfocus监听焦点，tab键操作也能监听-->
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
<!--功能下面这句已经封装好了，不过老版本浏览器的不支持。-->
<input type="text" placeholder="请输入关键字" />
</div>
<script>
// 焦点移入，清空值
function Focus(){
var tag = document.getElementById('i1');
var val = tag.value;
if(val == "请输入关键字"){
tag.value = "";
}
}
// 焦点移出，添加值
function Blur(){
var tag = document.getElementById('i1');
var val = tag.value;
if(val.length ==0){
tag.value = "请输入关键字";
}
}
</script>
</body>
二、元素操作
1、样式操作
- 样式操作（增删改 选中对象的 类名）：
className // 样式，返回字符串 classList // 样式，返回数组 classList.add() // 添加样式 classList.remove() // 移出样式
- 更细力度设置样式
obj.style.fontSize = '16px'; obj.style.backgroundColor = 'red'; obj.style.color = "red"
2、属性操作
setAttribute(key,value) // 设置标签属性 removeAttribute(key) // 移除标签属性 attributes // 获取所有标签属性 getAttribute(key) // 获取指定标签属性
创建标签，并添加到HTML中：
- a. 字符串形式
- b. 对象的方式
document.createElement(‘div’)
<body>
<input type="button" onclick="AddEle1();" value="+" />
<input type="button" onclick="AddEle2();" value="+" />
<div id="i1">
<p><input type="text" /></p>
</div>
<script>
// 第一种添加方式：字符串形式
function AddEle1(){
// 创建一个标签
// 将标签添加到i1里面
var tag = "<p><input type='text'/></p>";
// 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
// 第二种添加方式：对象的方式
function AddEle2(){
// 创建一个标签
// 将标签添加到i1里面
var tag = document.createElement('input');
tag.setAttribute('type', 'text');
tag.style.fontSize = '16px';
tag.style.color = 'red';
var p = document.createElement('p');
p.appendChild(tag);
document.getElementById('i1').appendChild(p);
}
</script>
</body>
上面实现了两种创建标签，并将其添加到HTML中实例。
3、提交表单
默认情况下：只有多行文本textarea、下拉框select 和input 标签可以数据提交到后台。
通过DOM任何标签都可提交表单。
<body>
<form id="f1" action="http://www.cnblogs.com/zoe233">
<input type="text" />
<input type="submit" value="提交1" />
<a onclick="submitForm();">提交2</a>
</form>
<script>
function submitForm(){
document.getElementById("f1").submit()
}
</script>
</body>
4、其他操作
console.log // 输出框 alert // 弹出框 confirm // 确认框 // URL和刷新 location.href // 获取当前URL location.href = "url" // 设置URL 重定向 location.reload() // 重新加载，刷新 // 定时器 setInterval // 多次定时器 clearInterval // 清除多次定时器 setTimeout // 单次定时器 clearTimeout // 清除单次定时器
浏览器console日志中，看运行输出信息
<body>
<form id="f1" action="http://www.oldboyedu.com">
<input type="text" />
<input type="submit" value="提交1" />
<a onclick="submitForm();">提交2</a>
</form>
<script>
function submitForm(){
//document.getElementById('f1').submit()
//alert(123);
var v = confirm('真的要提交吗？');
console.log(v);
// v 鼠标点击确定、取消的返回值。
//注意：此处未写上document.getElementById('f1').submit()方法，所以不会真正跳转，故可以在console中看到log
}
// 定时器，一直执行
var obj = setInterval(function(){
console.log(1);
clearInterval(obj); // 清除定时器，故只执行一次就结束了
}, 1000);
// 定时器，只执行一次
setTimeout(function () {
console.log('timeout');
},15000);
</script>
</body>
- 删除显示信息，显示3秒后自动消失
<body>
<div id="status"></div>
<input type="button" value="删除" onclick="DeleteEle();" />
<script>
function DeleteEle(){
document.getElementById('status').innerText = "已删除";
setTimeout(function () {
document.getElementById('status').innerText = "";
}, 3000);
}
</script>
</body>
三、事件
onclick，onblur，onfocus，onmouseover，onmouseout
单击，焦点移除，焦点聚焦，鼠标移到，鼠标移除
1、行为 样式 结构 相分离的页面
- 实现表格，鼠标移上去后，变色
<body>
<table border="1" width="300px">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
function t1(n){
var myTrs = document.getElementsByTagName("tr")[n];
// console.log(myTrs);
myTrs.style.backgroundColor = "red";
}
function t2(n){
var myTrs = document.getElementsByTagName("tr")[n];
myTrs.style.backgroundColor = "";
}
</script>
</body>
- 优化后 —> 行为(js) 样式(css) 结构(html) 相分离
<body>
<table id="i1" border="1" width="300px">
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover = function(){
// 谁调用这个函数，this指向谁
this.style.backgroundColor = "red";
};
myTrs[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
</script>
</body>
2、绑定事件的两种方式
- a. 直接标签绑定 onclick=’xxx()’ onfocus
- b. 先获取Dom对象，然后进行绑定
- document.getElementById(‘xx’).onclick
- document.getElementById(‘xx’).onfocus
a. 第一种绑定方式：直接标签绑定
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(ths){
// ths(形参) 当前点击的标签
}
b. 第二种绑定方式：先获取Dom对象，然后进行绑定
<input id='i1' type='button' >
document.getElementById('i1').onclick = function(){
// this 代指当前点击的标签
}
注意this这里不要乱用，两种绑定方式不同，this传入的时候也是不同的
c. 第三种绑定方式：同时绑定多个事件
<script>
var mydiv = document.getElementById("i1");
mydiv.addEventListener('click',function(){console.log('aaa'),false});
mydiv.addEventListener('click',function(){console.log('bbb'),false});
</script>
鼠标点击，同时执行以上两个，操作。第三个参数：默认就是false，false：冒泡模型；true：捕捉模型
3、作用域示例
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
// i=0,i=1,i=2
myTrs[i].onmouseover = function(){
this.style.backgroundColor = "red";
// myTrs[i].style.backgroundColor = "red";
// 为什么这里必须用this，不能用myTrs[i]？ 因为作用域不同，js是以函数作为作用域的
};
}
关于css、js，可以搜索“CSS参考手册”、“W3cschool手册”、“JavaScript 中CSS属性对照表”。
Sublime Text 工具使用介绍：
emmet插件
- 生成html结构
输入感叹号”!”，之后按tab建
-
快速生成表格，3行3列
table>tr*3>td*3 # 输入后，按tab键
table.test#test>tr*3>td*3 # 按tab，生成class="test" id="test"
table>tr*3>td*3>{fgf} # 往td里面写内容
table>tr*3>td*3>{fgf$} # fgf1、fgf1、fgf3
-
其他快捷操作
html:5 html:4s
可以搜索其他emmet插件使用方法