js----DOM对象
DOM:
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
查找元素：
查找元素
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
document.querySelector('[data-role="month"') 自定义属性
2、间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
操作：
操作
操作内容
innerText 文本
innerHTML HTML内容
value 值
操作属性
attributes // 获取所有标签属性 setAttribute(name,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性
removeAttrubute("属性名") //删除便签属性
var ele = document.getElementsByClassName('c1')[0];
ele.id='d2';//修改id //修改属性或者赋值
ele.id //获取属性（t.className）
操作class
className // 获取所有类名，也可以设置类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
var ele = document.getElementsByClassName('c1')[0];
ele.classList.add('hide'); // 隐藏
ele.classList.remove("hide") // 显示
操作标签
创建标签
// 方式一 var tag = document.createElement('a') tag.innerText = "xiaoming" tag.className = "c1" tag.href = "http://www.cnblogs.com/yanxiaoge" // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/yanxiaoge'>xiaoming</a>"
操作标签
// 方式一 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])
removeChild()： 获得要删除的元素，通过父元素调用删除 删除节点
somenode.replaceChild(newnode, 某个节点); 替换节点
操作css
var obj = document.getElementById('i1') obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";
操作位置
总文档高度 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代指文档根节点 */
操作表单
document.geElementById('form').submit()
表格示例(取消,全选,反选)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格示例</title>
</head>
<body>
<button class="select">全选</button>
<button class="reserve">反选</button>
<button class="cancel">取消</button>
<table border="1">
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
<script>
// 方式一：分别给每个button增加事件
// var ele_select = document.getElementsByClassName('select')[0];
// var ele_reserve = document.getElementsByClassName('reserve')[0];
// var ele_cancel = document.getElementsByClassName('cancel')[0];
// var ele_input = document.getElementsByClassName('check');
//全选
// ele_select.onclick = function () {
// for (var i = 0; i < ele_input.length; i++) {
// ele_input[i].checked = 'checked'
// }
// };
// //取消
// ele_cancel.onclick = function () {
// for (var i =0;i<ele_input.length;i++){
// //删除checked属性，直接设置为空就行了
// ele_input[i].checked = ''
// }
// };
// //反选
// ele_reserve.onclick = function () {
// for (var i = 0; i < ele_input.length; i++) {
// var ele = ele_input[i];
// if (ele.checked) {//如果选中了就设置checked为空
// ele.checked = '';
// }
// else {//如果没有就设置checked = checked
// ele.checked = 'checked';
// }
// }
// };
//方式二：方式一的优化循环增加事件
var ele_button = document.getElementsByTagName('button');
var ele_input = document.getElementsByClassName('check');
for(var i=0;i<ele_button.length;i++) {
ele_button[i].onclick = function () {
if (this.innerHTML == '全选') {
for (var i = 0; i < ele_input.length; i++) {
//添加一个checked属性
ele_input[i].checked = 'checked'
}
}
else if (this.innerHTML == '取消') {
for (var i = 0; i < ele_input.length; i++) {
//删除checked属性，直接设置为空就行了
ele_input[i].checked = ''
}
}
else {
for (var i = 0; i < ele_input.length; i++) {
var ele = ele_input[i];
if (ele.checked) {//如果选中了就设置checked为空
ele.checked = '';
}
else {//如果没有就设置checked = checked
ele.checked = 'checked';
}
}
}
}
}
</script>
</body>
</html>
示例
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: white;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: grey;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="back">
<input class="c" type="button" value="click">
</div>
<div class="shade hide handles"></div>
<div class="models hide handles">
<input class="c" type="button" value="cancel">
</div>
<script>
var eles=document.getElementsByClassName("c");
var handles=document.getElementsByClassName("handles");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){
if(this.value=="click"){
for(var j=0;j<handles.length;j++){
handles[j].classList.remove("hide");
}
}
else {
for(var j=0;j<handles.length;j++){
handles[j].classList.add("hide");
}
}
}
}
</script>
</body>
</html>
模态对话框
示例
