python基础6-web之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 // 上一个兄弟标签元素
二、操作
1、内容
innerText 仅文本
outerText
innerHTML HTML内容（全内容包括标签）
value 值
input value获取当前标签中的值
select 获取选中的value值
textarea value获取当前标签中的值
2、属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性
removeAttribute(key,value)// 删除标签属性 /* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr); */
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.c1{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color:black;
opacity:0.5;
z-index:9;
}
.c2{
width:500px;
height:400px;
background-color:white;
position:fixed;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-200px;
z-index:10;
}
</style>
</head>
<body style="margin:0;">
<div>
<input type="button" value="添加" onclick="ShowModel();"/>
<input type="button" value="全选" onclick="ChooseAll();"/>
<input type="button" value="取消" onclick="CancelAll();"/>
<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>
<td>运支部</td>
<td>larlly</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>运支部</td>
<td>larlly2</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>运支部</td>
<td>larlly3</td>
</tr> </tbody>
</table>
</div>
<!---遮罩层start-->
<div id="i1" class="c1 hide"></div>
<!---遮罩层end-->
<!--弹窗start-->
<div id="i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定" />
</p>
</div>
<!--弹窗end-->
<script>
function ShowModel(){
document.getElementById("i1").classList.remove('hide');
document.getElementById("i2").classList.remove('hide');
}
function HideModel(){
document.getElementById("i1").classList.add('hide');
document.getElementById("i2").classList.add('hide');
}
function ChooseAll(){
var tbody=document.getElementById('tb');
//获取所有的tr
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 CancelAll(){
var tbody=document.getElementById('tb');
//获取所有的tr
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');
//获取所有的tr
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>
<!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>
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.item .header{
height:35px;
background-color:blue;
color:white;
line-height:35px;
}
</style>
</head>
<body>
<div style="height:48px;"></div>
<div style="width:300px;">
<div class="item">
<div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id="i2" class="header" onclick="ChangeMenu('i2');">菜单2</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id="i3" class="header" onclick="ChangeMenu('i3');">菜单3</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id="i4" class="header" onclick="ChangeMenu('i4');">菜单4</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
</div>
<script>
function ChangeMenu(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('hide');
}
current_header.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
添加input标签
<!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(){ //创建标签并添加到id='i1'里面， var tag = "<p><input type='text' /></a></p>"; document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag) } function AddEle2(){ var tag = document.createElement('input'); tag.setAttribute('type','text'); tag.style.fontSize = "16px"; document.getElementById('i1').appendChild(tag); // var p = document.createElement('p'); // p.appendChild(tag); // document.getElementById('i1').appendChild(p); } </script> </body> </html>
3、class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = 'red';
<style>
.c1{
font-size:16px;
color:red;
}
</style>
示例之模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.c1{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color:black;
opacity:0.5;
z-index:9;
}
.c2{
width:500px;
height:400px;
background-color:white;
position:fixed;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-200px;
z-index:10;
}
</style>
</head>
<body style="margin:0;">
<div>
<input type="button" value="添加" onclick="ShowModel();"/>
<table>
<thead>
<tr>
<th>部门</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>运支部</td>
<td>larlly</td>
</tr>
</tbody>
</table>
</div>
<!---遮罩层start-->
<div id="i1" class="c1 hide"></div>
<!---遮罩层end-->
<!--弹窗start-->
<div id="i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定" />
</p>
</div>
<!--弹窗end-->
<script>
function ShowModel(){
document.getElementById("i1").classList.remove('hide');
document.getElementById("i2").classList.remove('hide');
}
function HideModel(){
document.getElementById("i1").classList.add('hide');
document.getElementById("i2").classList.add('hide');
}
</script>
</body>
</html>
4、标签操作
a.创建标签
创建标签并添加到HTML中
// 方式一，对象的方式
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</a>"
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])
5、样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
6、位置操作
总文档高度
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代指文档根节点
*/
7、提交表单，任何标签通过dom都可提交表单
document.geElementById('form').submit()
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id='form' action="http://www.oldboyedu.com"> <input type="text" /> <input type="submit" value="提交"> <a onclick="submitForm()">提交bydom</a> </form> <script> function submitForm(){ document.getElementById('form').submit() } </script> </body> </html>
8、其他操作
console.log 输出框 alert 弹出框 confirm 确认框,返回值为true/false // URL和刷新 location.href 获取URL location.href = "url" 重定向,跳转 location.reload() 重新加载，页面刷新
location.href = location.href <===> location.reload() // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p onclick="confirm1();">确认删除</p> <script> function confirm1() { var a = confirm("真的要删除吗？"); alert(a); console.log(a); } </script> </body> </html>
示例值定时器
var o1 = setInterval(function(){},5000);
clearInterval(o1);
var o2 = setTimeout(function(){},5000);
clearTimeout(o2);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <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> </html>
三、事件
示例之onmouseover/onmouseout :鼠标浮动到表格中某行上方或离开，对该行的样式（背景颜色）进行修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px" width="300px" > <thead> <tr onmouseover="t1(0);" onmouseout="t2(0);"> <th>账号</th> <th>邮箱</th> <th>地址</th> </tr> </thead> <tbody> <tr onmouseover="t1(1);" onmouseout="t2(1);"> <td>1</td> <td>1</td> <td>1</td> </tr> <tr onmouseover="t1(2);" onmouseout="t2(2);"> <td>2</td> <td>2</td> <td>2</td> </tr> </tbody> </table> <script> function t1(n){ var trs=document.getElementsByTagName("tr")[n]; trs.style.backgroundColor='red'; } function t2(n){ var trs=document.getElementsByTagName("tr")[n]; trs.style.backgroundColor=''; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px" width="300px" > <thead> <tr > <th>账号</th> <th>邮箱</th> <th>地址</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>1</td> <td>1</td> </tr> <tr > <td>2</td> <td>2</td> <td>2</td> </tr> </tbody> </table> <script> var trs=document.getElementsByTagName("tr"); var len = trs.length; for (var i=0; i<len; i++){ trs[i].onmouseover = function(){ this.style.backgroundColor='red'; }; trs[i].onmouseout = function() { this.style.backgroundColor = '' } } </script> </body> </html>
对于事件需要注意的要点
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容。
补充之行为js、样式css、结构html相分离的页面
绑定事件的俩种方式
a.直接标签绑定 onclick='xxx' onfocus
b.先获取dom对象，然后进行绑定
document.getElementById('xxx').onclick
document.getElementById('xxx').onfocus
this,当前触发事件的标签
a.第一种绑定方式
<input type='button' onclick='ClickOn(this)'>
function ClickOn(self){
//self 当前点击的标签
}
b.第二种绑定方式
<input type='button>
document.getElementById('i1').onclick=function(){
//this 代指当前点击的标签
}
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width:600px;margin: 0 auto;" > <input id="i1" type="text"onfocus="Focus();" onblur="Blur();" value="请输入关键字" /> <input type="text" placeholder="请输入关键字" /> </div> <script> function Focus(){ var tag=document.getElementById('i1'); var va1 = tag.value; if ( va1 == "请输入关键字" ){ tag.value=""; } } function Blur(){ var tag=document.getElementById('i1'); var va1 = tag.value; if ( va1 == "" ){ tag.value="请输入关键字"; } } </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
<script type="text/javascript">
function Enter(){
var id= document.getElementById("tip")
id.className = 'black';
if(id.value=='请输入关键字'||id.value.trim()==''){
id.value = ''
}
}
function Leave(){
var id= document.getElementById("tip")
var val = id.value;
if(val.length==0||id.value.trim()==''){
id.value = '请输入关键字'
id.className = 'gray';
}else{
id.className = 'black';
}
}
</script>
</head>
<body>
<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/>
</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>
跑马灯
事件之捕捉与冒泡
在w3c标准模型中，事件分为捕捉和冒泡
addEventListener(.. true/false);
第三个参数true表示捕捉，false或者不填第三个参数表示冒泡，
但推荐冒泡时不要省略‘false’参数
遗留问题：true 捕捉并未看到效果，而false冒泡正常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1 {
height:450px;
background-color:#dddddd;
}
</style>
</head>
<body>
<div id="i1">事件之捕捉与冒泡之冒泡</div>
<div id="i2">事件之捕捉与冒泡之捕捉</div>
<script>
var mydiv = document.getElementById("i1");
mydiv.addEventListener('click',function(){alert("先")},false);
mydiv.addEventListener('click',function(){alert("后")},false);
var mydiv2 = document.getElementById("i2");
mydiv2.addEventListener('click',function(){alert("先1")},true);
mydiv2.addEventListener('click',function(){alert("后1")},true);
</script>
</body>
</html>
javascript词法分析解析
function t1(age){
console.log(age); //function
var age=27;
console.log(age); //27
function age(){
console.log(age); //27
};
};
t1(3);
分析如下
active object ===> ao
1 形式参数
2 局部变量
3 函数声明表达式
1.形式参数；
ao.age=undefined
ao.age=3
2.局部变量
ao.age=undefined
3.函数声明表达式 （优先级最高）
ao.age=function()
作用域典型示例
var trs=document.getElementsByTagName("tr");
var len = trs.length;
for (var i=0; i<len; i++){
trs[i].onmouseover = function(){
this.style.backgroundColor='red';
};
trs[i].onmouseout = function() {
this.style.backgroundColor = ''
}
}
浙公网安备 33010602011771号