Web之dom
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
document.getElementById('i1') /根据ID获取一个标签
document.getElementsByName('div') /根据name属性获取标签集合
document.getElementsByClassName('c1') /根据class属性获取标签集合
document.getElementsByTagName() /根据标签名获取标签集合
2、间接查找
parentElement() /父节点标签元素
children() /所有子标签
firstElementChild() /第一个子标签元素
lastElementChild() /最后一个子标签元素
nextElementtSibling() /下一个兄弟标签元素
previousElementSibling() /上一个兄弟标签元素
二、操作
1、内容
tag.innerText //仅获取标签中的文本内容
tag.innerText = 'ada' //对标签的文本内容重新赋值
tag.innerHtml //全部获取
tag.value //值
input标签 可通过value获取当前标签中的值
select标签 获取选中的value值(selectedIndex)
textarea 可通过value获取当前标签中的值
2、属性
obj.setAttribute('key','value') //添加属性('属性名称','属性值')
obj.removeAttribute('lishang') //删除属性
obj.attributes //列出所有属性
例子：
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" />
obj = document.getElementById('i1')
--->>>
obj： --->>>
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" >
obj.setAttribute('lishang','xiaomeng')
obj: --->>>
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" lishang="xiaomeng">
obj.removeAttribute('lishang')
obj.attributes --->>>
NamedNodeMap {0: id, 1: onfocus, 2: onblur, 3: type, 4: value, id: id, onfocus: onfocus, onblur: onblur, type: type, value: value, …}
3、class操作
className // 获取所有类名
classList.remove(cls) // 删除指定指定样式
classList.add(cls) // 添加指定样式
checkbox.checked // 能获取值也能够赋值
上面是针对class整个样式做修改和获取，下面是修改其中单个属性
如：
<style>
.c1{
font-size: 16px;
color: red;
...
}
</style>
<div class='c1 c2' style='font-size: 16px;'></div>
obj.style.fontSize = '16px';
obj.style.color = 'pink';
4、标签操作
4.1、创建标签，并添加到Html页面中去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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() {
var tag = "<p><input type='text'/></p>"
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
//添加方式二，通过对象的方式
function Addele2() {
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(tag);
</script>
</body>
</html>
5、提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="http://www.oldboyedu.com">
<input type="text">
//提交方式 1
<input type="submit" value="提交">
//提交方式 2
<a onclick="submit();">提交</a>
</form>
<script>
function submit() {
document.getElementById('f1').submit()
}
</script>
</body>
</html>
6、其他
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "baidu.com" 重定向
location.reload() 重新加载
// 定时器
var oa = setInterval(function(){};5000}); 多次定时器,每5秒执行一次
clearInterval(oa) 清除多次定时器
var tb= setTimeout(function(){};5000}); 单次定时器,5秒之后执行一次
clearTimeout(tb) 清除单次定时器
三、事件
一个表格鼠标移上去的时候高亮显示
1、dom0 初级写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="200px">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>1</td><td>1</td></tr>
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>2</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>3</td><td>3</td><td>3</td></tr>
</table>
<script>
function t1(n) {
var myc = document.getElementsByTagName('tr')[n];
myc.style.backgroundColor = "green";
}
function t2(n) {
var myc = document.getElementsByTagName('tr')[n];
myc.style.backgroundColor = '';
}
</script>
</body>
</html>
2、dom1 稍微高级一点的写法，相分离的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="200px">
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td></tr>
</table>
<script>
var mycolor = document.getElementsByTagName("tr");
var len = mycolor.length;
for(var i=0;i<len;i++){
mycolor[i].onmouseover = function () {
//this代指当前触发事件的标签
this.style.backgroundColor = 'green';
}
mycolor[i].onmouseout = function () {
this.style.backgroundColor = '';
}
}
</script>
</body>
</html>
3、绑定事件的两种方式：
绑定事件的两种方式：
a.直接标签绑定 obclick='xxx()' onfocus
b.先获取Dom对象，然后进行绑定
document.getElementById('xxx').onclick
document.getElementById('xxx').onfocus
4、this的绑定方式
this的绑定方式
a.第一种绑定方式
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(self){
self.xxx //self代指当前点击的标签
}
b.第二种绑定方式
<input id='i1' typr='button' >
document.getElementById('i1').onclick = function(){
this.style.backgroudcolor = 'red' //this代指当前点击的标签
}
c.第三种绑定方式
addEventListener("click",function(){console.log(main)},false)
第三种绑定方式的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
background-color: #ff755f;
height: 400px;
width: 300px;
}
#content{
background-color: #4F69B7;
height: 200px;
width: 150px
}
</style>
</head>
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain = document.getElementById('main');
var mycontent = document.getElementById('content');
//后面第三个参数为false时，是事件的捕捉，从上往下的，先输出main，再输出content
mymain.addEventListener("click",function () {console.log("main")},false);
mycontent.addEventListener("click",function () {console.log("content")},false)
// 第三个参数如果为true，是事件的冒泡，是自下往上的，先输出content，再输出main
// mymain.addEventListener("click",function () {console.log("main")},false);
// mycontent.addEventListener("click",function () {console.log("content")},false)
</script>
</body>
</html>
四、小例子
1、模拟弹出对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style="margin: 0">
<div>
<input type="button" value="提交" onclick="showk();"/>
<table>
<thead>
<tr>
<th>主机名</th>
<th>端口</th>
</tr>
<tr>
<th>192.168.1.1</th>
<th>80</th>
</tr>
<tr>
<th>172.16.10.10</th>
<th>443</th>
</tr>
<tr>
<th>10.10.1.175</th>
<th>3306</th>
</tr>
</thead>
</table>
</div>
<!--遮罩层开始-->
<div id = 'i1' class="c1 header"></div>
<!--遮罩层结束-->
<!--弹出框开始-->
<div id = 'i2' class="c2 header">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="确定" />
<input type="button" value="取消" onclick="quxiao();"/>
</p>
</div>
<!--弹出框结束-->
<script>
function showk() {
document.getElementById('i1').classList.remove('header');
document.getElementById('i2').classList.remove('header');
}
function quxiao() {
document.getElementById('i1').classList.add('header');
document.getElementById('i2').classList.add('header');
}
</script>
</body>
</html>
2、模拟全选、取消以及反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style="margin: 0">
<div>
<input type="button" value="提交" onclick="showk();"/>
<input type="button" value="全选" onclick="choseall();"/>
<input type="button" value="取消" onclick="cancleall();"/>
<input type="button" value="反选" onclick="reverseall()"/>
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<th>192.168.1.1</th>
<th>80</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<th>172.16.10.10</th>
<th>443</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<th>10.10.1.175</th>
<th>3306</th>
</tr>
</tbody>
</table>
</div>
<!--遮罩层开始-->
<div id = 'i1' class="c1 header"></div>
<!--遮罩层结束-->
<!--弹出框开始-->
<div id = 'i2' class="c2 header">
<p><input style="margin-left: 30%; margin-top: 20%;" type="text" /></p>
<p><input style="margin-left: 30%;" type="text" /></p>
<p>
<input style="margin-left: 30%;" type="button" value="确定" />
<input type="button" value="取消" onclick="quxiao();"/>
</p>
</div>
<!--弹出框结束-->
<script>
function showk() {
document.getElementById('i1').classList.remove('header');
document.getElementById('i2').classList.remove('header');
}
function quxiao() {
document.getElementById('i1').classList.add('header');
document.getElementById('i2').classList.add('header');
}
function choseall() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = true;
}
}
function cancleall() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = false;
}
}
function reverseall() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
if (checkbox.checked){
checkbox.checked = false;
}else{
checkbox.checked = true;
}
}
}
</script>
</body>
</html>
3、示例之后台管理左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item .header{
background-color: #1E84E7;
color: white;
height: 35px;
width: 400px;
line-height: 35px;
}
.head{
display: none;
}
</style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
<div class="item">
<div id='i1' class="header" onclick="OpenList('i1');">菜单一</div>
<div class="content head">
<div>内容一</div>
<div>内容一</div>
<div>内容一</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" onclick="OpenList('i2');">菜单二</div>
<div class="content head">
<div>内容二</div>
<div>内容二</div>
<div>内容二</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="OpenList('i3');">菜单三</div>
<div class="content head">
<div>内容三</div>
<div>内容三</div>
<div>内容三</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="OpenList('i4');">菜单四</div>
<div class="content head">
<div>内容四</div>
<div>内容四</div>
<div>内容四</div>
</div>
</div>
</div>
<script>
function OpenList(nid) {
var current_header = document.getElementById(nid);
var item_list = current_header.parentElement.parentElement.children;
for (var i=0;i<item_list.length;i++){
var current_item = item_list[i];
current_item.children[1].classList.add('head');
}
current_header.nextElementSibling.classList.remove('head');
}
</script>
</body>
</html>
4、实例之输入框点击提示消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 600px;margin: 0 auto">
<!--点击框内onfocus和点击框外分开onblur-->
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" />
<br>
<!--点击框内和框外合并使用placeholder-->
<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 == ""){
tag.value = "请输入关键字"
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号