DOM
文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的内容呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是javascript语言规范的规定的核心内容·
一丶查找元素
1·直接查找
document.getElementById //根据ID获取一个标签
document.getElementsByName //根据name属性获取标签集合
document.getElementsByClassName //根据class属性获取标签集合
document.getElementsByTagName //根据标签名获取标签集合2·简介查找
parentNode //父节点
childNodes //所有子节点
fistChild //第一个子节点
lastChild //最后一个子节点
nextSibling //下一个兄弟节点
previousSibling //上衣个兄弟节点
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementtSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素二丶操作
1丶内容
innerText //文本
outerText
innerHTML //HTML内容
innerHTML
value //值2丶属性
attrbutes //索取所有标签属性
setAttribute(key,value) //设置标签属性
getAttribute(key) //获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue = "democlass";
document.detElementById("n1").setAttributeNode(atr);
*/<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="bottob" value="全选" onclick="CheckAll();"/>
<input type="bottob" value="取消" onclick="CheckAll();"/>
<input type="button" value="反选" onclick="ReverseCheck();"/>
<table border="1">
<thead>
</therd>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>66666</td>
<td>88888</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>66666</td>
<td>88888</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>66666</td>
<td>88888</td>
</tr>
</table>
<script>
function CheckAll(tha){
var tb = document.getElementById("tb");
var trs = tv.childNodes;
for(var i=0;i<trs.lengt;i++){
var current_tr = trs[i];
if(current_tr.nodeType == 1){
var inp = current_tr.firstElementChild.getElementByTagName("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>
3丶class操作
className //获取所有类名
classList.remove(cls) //删除指定类
classList.add(cls) //添加类4丶标签操作
a·创建标签
//方式一
var tag = document.createElement("a")
tag.innerText = "Wyc"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wuyongcong"
//方式二
var tag = "<a class="c1" href = "http://www.cnblogs.com/wuyongcong">wuyongcong</a>"b·操作标签
//方式一
var obj = "<input type="text" />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement("afterBegin",document.createElement("p"))
//注意:第一个参数只能是"beforeBegin","afterBegin","befoeEnd","afterEnd"
//方式二
var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])5丶样式操作
var obj = document.getElementById("i1")
obj.style.fontSize = "32px";
obj.style.backgroundColor = "blue";<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color:gray;"/>
<script>
function Focus(ths){
ths.style.color = "black";
if(ths.value == "请输入关键字" || ths.value.trim() == ""){
ths.value = "";
}
}
function Blur(ths){
if(ths.value.trim() == ""){
ths.value.color = "gray";
}else{
ths.style.color = "black";
}
}
</script>6丶位置操作
//总文档高宽
document.documentElement.offsetHeight
//当前文档占屏膜高宽
document.documentElement..clientHeight
//自身高度
tag.offsetHeight
//距离上级定位高度
tag.offsetTop
//父定位标签
tag.offsetParent
//滚动高度
tag.scrollTop
/*
clientHeight -> 课件区域: height + padding
clienTop -> border高度
offsetHeight -> 可见区域:height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高:height + padding
scrollTop -> 滚动高度
特别的:
document.documentElement代指文档根节点
*/7丶提交表单
document.getElementById("form").submit()8丶其他操作
console.log //输出框
alert //弹出框
confirm //确认框
// URL和刷新
location.href //获取URL
location.href = "url" //重定向
location.reload() //重新加载
//定时器
setInterval //多次定时器
clearInterval //清除多次定时器
setTimeout //单次定时器
clearTimeout //清除单词定时器三·事件
对于事件需要注意的要点:
· this
· event
· 事件链以及跳出
this标签当前正在操作的标签,event封装了当前事件的内容·
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-07-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
