DOM
文档对象模型(Document Object
Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
查找元素
1、直接查找
document.getElementById 根据
ID
获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据
class
属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2、间接查找
parentNode
/
/
父节点
childNodes
/
/
所有子节点
firstChild
/
/
第一个子节点
lastChild
/
/
最后一个子节点
nextSibling
/
/
下一个兄弟节点
previousSibling
/
/
上一个兄弟节点
parentElement
/
/
父节点标签元素
children
/
/
所有子标签
firstElementChild
/
/
第一个子标签元素
lastElementChild
/
/
最后一个子标签元素
nextElementtSibling
/
/
下一个兄弟标签元素
previousElementSibling
/
/
上一个兄弟标签元素
更多: http://www.cnblogs.com/wupeiqi/articles/5643298.html
二、操作
1、内容
innerText 文本
outerText
innerHTML HTML内容
outnerHTML
value 值
2、属性
attributes
// 获取所有标签属性
setAttribute(key,value)
// 设置标签属性
getAttribute(key)
// 获取指定标签属性
例子如下:
3、class操作
className
// 获取所有类名
classList.remove(cls)
// 删除指定类
classList.add(cls)
// 添加类
4.样式
var
obj = document.getElementById(
‘i1‘
)
obj.style.fontSize =
"32px"
;
obj.style.backgroundColor =
"red"
;
效果如下:
----------------------------------------------------------------------------------
5、标签操作
a.创建标签
// 方式一
var
tag = document.createElement(
‘a‘
)
tag.innerText =
"wupeiqi"
tag.className =
"c1"
tag.href =
"http://www.cnblogs.com/wupeiqi"
// 方式二
var
tag =
"<a class=‘c1‘ href=‘http://www.cnblogs.com/wupeiqi‘>wupeiqi"
b.操作标签
// 方式一
var
obj =
"<input type=‘text‘ />"
;
xxx.insertAdjacentHTML(
"beforeEnd"
,obj);
xxx.insertAdjacentElement(
‘afterBegin‘
,document.createElement(
‘p‘
))
//注意:第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
// 方式二
var
tag = document.createElement(
‘a‘
)
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
6、定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
7、位置操作
总文档高度
document.documentElement.offsetHeight
当前文档占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距离上级定位高度
tag.offsetTop
父定位标签
tag.offsetParent
滚动高度
tag.scrollTop
clientHeight -> 可见区域:height + padding
clientTop -> border高度
offsetHeight -> 可见区域:height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高:height + padding
scrollTop -> 滚动高度
特别的:
document.documentElement代指文档根节点
看效果:
8、提交表单
document.geElementById(
‘form‘
).submit()
9、其他
console.log 输出框
alert 弹出框
confirm 确认框 确定-->true 取消-->false
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
来看一个搜索框默认值点击消失的例子:(内容操作)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<input id="l1" type="text" value="请输入" onfocus="Clear();" onblur="Writeback();" />
<script type="text/javascript">
// 函数名开头必须大写
function Clear() {
var tag=document.getElementById(‘l1‘);
if(tag.value == "请输入"){
tag.value = "";
}
}
function Writeback() {
var con=document.getElementById("l1");
if(con.value === ""){
con.value = "请输入"
}
}
</script>
</body>
</html>
静态对话框 实现(dom 样式操作)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
left:0;
right: 0;
top:0;
bottom: 0;
background-color: rgba(0,0,0,.5);
z-index: 100;
}
.middle{
position: fixed;
height: 200px;
width: 400px;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-100px;
background-color: #cccccc;
z-index: 101;
}
.mid1{
margin-left: 100px;
margin-top: 120px;
}
.mid2{
float: right;
margin-right: 100px;
margin-top: 120px;
}
</style>
</head>
<body>
<input type="button" value="测试" onclick="Showup();"/>
<div id="l1" class="shadow hide"></div>
<div id="l2" class="middle hide">
<input id="l3" type="button" value="确定" class="hide mid1" onclick="Goaway();" />
<input id="l4" type="button" value="取消" class="hide mid2" onclick="Goaway();" />
</div>
<script type="text/javascript">
function Showup() {
var tag1 = document.getElementById("l1");
var tag2 = document.getElementById("l2");
var tag3 = document.getElementById("l3");
var tag4 = document.getElementById("l4");
tag1.classList.remove("hide");
tag2.classList.remove("hide");
tag3.classList.remove("hide");
tag4.classList.remove("hide");
}
function Goaway() {
var tag1 = document.getElementById("l1");
var tag2 = document.getElementById("l2");
var tag3 = document.getElementById("l3");
var tag4 = document.getElementById("l4");
tag1.classList.add("hide");
tag2.classList.add("hide");
tag3.classList.add("hide");
tag4.classList.add("hide");
}
</script>
</body>
</html>
全选 取消 反选 的实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();"/>
<input type="button" value="取消" onclick="CancelAll();"/>
<input type="button" value="反选" onclick="ReverseCheck();"/>
<table border="1" >
<thead>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
</tbody>
</table>
<script>
function CheckAll(ths){
var tb = document.getElementById(‘tb‘);
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
inp.checked = true;
}
}
}
function CancelAll(ths){
var tb = document.getElementById(‘tb‘);
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
inp.checked = false;
}
}
}
function ReverseCheck(ths){
var tb = document.getElementById(‘tb‘);
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
if(inp.checked){
inp.checked = false;
}else{
inp.checked = true;
}
}
}
}
</script>
</body>
</html>
点赞小列子的实现:(创建,操作标签--document.createElement)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test16</title>
</head>
<body>
<a style="top: 100px;position: relative;" onclick="Favor(this);">点赞</a>
<script >
function Favor(ths){
// ths => this => 当前触发的标签
var top = 49;
var left = 71;
var op = 1;
var fontSize = 18;
var tag = document.createElement(‘span‘);
tag.innerText = ‘+1‘;
tag.style.position = ‘absolute‘;
tag.style.top = top + "px";
tag.style.left = left + "px";
tag.style.opacity = op;
tag.style.fontSize = fontSize + ‘px‘;
ths.parentElement.appendChild(tag);
var interval = setInterval(function(){
top -= 10;
left += 10;
fontSize += 5;
op -= 0.1;
tag.style.top = top + "px";
tag.style.left = left + "px";
tag.style.opacity = op;
tag.style.fontSize = fontSize + ‘px‘;
if(op <= 0.2){
clearInterval(interval);
ths.parentElement.removeChild(tag);
}
}, 50);
}
</script>
</body>
</html>
定时器列子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="status" style="color: red;">
</div>
<input type="submit" onclick="DeleteStatus();" value="删除" />
<script>
function DeleteStatus(){
var s = document.getElementById(‘status‘);
s.innerText = ‘删除成功‘;
setTimeout(function(){
s.innerText = "";
},5000);
}
</script>
</body>
</html>
返回顶部:(document.body.scrollTop)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.back{
position: fixed;
right: 20px;
bottom: 20px;
color: red;
}
.hide{
display: none;
}
</style>
</head>
<body onscroll="BodyScroll();">
<div style="height: 2000px;background-color: #dddddd;"></div>
<div id="back" class="back hide" onclick="BackTop();">返回顶部</div>
<script>
function BackTop(){
document.body.scrollTop = 0;
}
function BodyScroll(){
var s = document.body.scrollTop;
var t = document.getElementById(‘back‘);
if(s >= 100){
t.classList.remove(‘hide‘);
}else{
t.classList.add(‘hide‘);
}
}
</script>
</body>
</html>
dom提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="f1">
<input type="text" />
<input type="submit" value="提交"/>
<a onclick="Submit()">提交</a>
</form>
<script>
function Submit(){
var form = document.getElementById(‘f1‘);
form.submit();
}
</script>
</body>
</html>
跑马灯
<!DOCTYPE html>
<html>
<head>
<meta charset=‘utf-8‘ >
<title>欢迎blue shit莅临指导 </title>
<script type=‘text/javascript‘>
function Go(){
var content = document.title;
var firstChar = content.charAt(0)
var sub = content.substring(1,content.length)
document.title = sub + firstChar;
}
setInterval(‘Go()‘,1000);
</script>
</head>
<body>
</body>
</html>
三、事件
注意:
this 当前触发事件的标签;
全局绑定事件 windows.onkeydown = function()
event 包含事件相关内容
默认事件:
自定义优先:a标签 form标签
默认优先: checkbox
基于此,可以实现用户输入验证。
event示例:
window.onkeydown = function(event){
//console.log(event);
if(event.keyCode == 27){
HideModal();
}
}
用户验证示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" id="username" />
<input type="submit" value="提交" onclick="return SubmitForm();" />
</form>
<script>
function SubmitForm(){
var user = document.getElementById(‘username‘);
if(user.value.length > 0 ){
// 可以提交
return true;
}else{
// 不可提交,提示错误
alert(‘用户名输入不能为空‘);
return false;
}
}
</script>
</body>
</html>
事件优先级示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" onclick="ClickB();">百度</a>
<form>
<input type="text" />
<input type="submit" onclick="ClickB();" />
</form>
<input type="checkbox" onclick="ClickB();" />
<script>
function ClickB(){
alert(123);
}
</script>
</body>
</html>