Dom对象
1：定义
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
2：Dom节点
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航
节点(自身)属性:
- attributes - 节点（元素）的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点（元素）的文本值
导航属性:
- parentNode - 节点（元素）的父节点 (推荐)
- firstChild – 节点下第一个子元素 firstElementChild
- lastChild – 节点下最后一个子元素 lastElementChild
- childNodes - 节点（元素）的子节点
- ele.nextElementSibling- 兄弟标签
推荐导航属性：
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<p name='littleP' class="p1">hello p</p>
<div class="div2">hello div2
<div>div3</div>
<a href="">click</a>
</div>
</div>
<script>
var ele=document.getElementsByClassName('p1')[0];
console.log(ele);
console.log(ele.nodeType);
console.log(ele.nodeValue);
console.log(ele.innerHTML);
console.log(ele.nodeName)；
var p_ele=ele.parentNode;
console.log(p_ele.nodeName);
var b_ele2=ele.nextElementSibling;
console.log(b_ele2.nodeName);
console.log(b_ele2.innerHTML);
var ele4=document.getElementsByName('littleP')[0];
var ele5=ele4.nextElementSibling;
console.log(ele5.innerHTML);
console.log(ele5.innerText);
ele5.innerHTML="<h1>yuan</h1>"
</script>
</body>
</html>
3：Dom event (事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
两种为元素附加事件属性的方式：
<div onclick="alert(123)">点我呀</div>
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
alert("hi");
};
</script>
<div id="abc" onclick="func1(this)">事件绑定方式1</div>
<div id="id123">事件绑定方式2</div>
<script>
function func1(self){
console.log(self.id)
}
//jquery下是$(self), 这种方式this参数必须填写;
//------------------------------------------
var ele=document.getElementById("id123").onclick=function(){
console.log(this.id);
//jquery下是$(this), 这种方式不需要this参数;
}
</script>
onload：
onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// window.onload=function(){
// var ele=document.getElementById("ppp");
// ele.onclick=function(){
// alert(123)
// };
// };
function fun1() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}
</script>
</head>
<body onload="fun1()">
<p id="ppp">hello p</p>
</body>
</html>
onsubmit:
是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<form id="form">
<input type="text"/>
<input type="submit" value="点我!" />
</form>
<script type="text/javascript">
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("验证失败 表单不会提交!");
// return false;
// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault();
}
事件传播：
<div id="abc_1" style="border:1px solid red;300px;height:300px;">
<div id="abc_2" style="border:1px solid red;200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
}
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
4：增删改查
4.1 node 的CURD
增:
|
1
2
|
createElement(name)创建元素appendChild();将元素添加 |
删:
|
1
2
3
|
获得要删除的元素获得它的父元素使用removeChild()方法删除 |
改:
第一种方式:
使用上面增和删结合完成修改
第二中方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
查: 使用之前介绍的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1,.div2,.div3,.div4{
300px;
height: 100px;
}
.div1{
background-color: green;
}
.div2{
background-color: yellow;
}
.div3{
background-color: salmon;
}
.div4{
background-color:rebeccapurple;
}
</style>
</head>
<body>
<div class="div1">
<button onclick="add()">add</button>
hello div1
</div>
<div class="div2">
<button onclick="del()">del</button>
hello div2
</div>
<div class="div3">
<button onclick="change()">change</button>
<p>hello div1</p>
</div>
<div class="div4">hello div1</div>
<script>
function add() {
var ele=document.createElement('p');
ele.innerHTML='<h1>hello p</h1>';
ele.style.color='red';
ele.style.fontSize='10px';
var father=document.getElementsByClassName('div1')[0];
father.appendChild(ele)
}
function del() {
var father=document.getElementsByClassName('div1')[0];
var son=father.getElementsByTagName('p')[0];
father.removeChild(son)
}
function change() {
var img=document.createElement('img');
// img.src='nothing.PNG';
img.setAttribute('src','nothing.PNG');
var ele=document.getElementsByTagName('p')[0];
var father=document.getElementsByClassName('div3')[0];
father.replaceChild(img,ele);
}
</script>
</body>
</html>
4.2 修改html dom
- 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
- 改变 CSS 样式
|
1
2
|
<p id="p2">Hello world!</p>document.getElementById("p2").style.color="blue";<br> |
- 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 创建新的 HTML 元素
createElement(name)
- 删除已有的 HTML 元素
elementNode.removeChild(node)
- 关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
js 完成定时器功能 setInterval() clearInterval()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#id1{
200px;
height:80px
}
</style>
</head>
<body>
<!--setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。-->
<!--clearInterval() 取消由 setInterval() 设置的 timeout。-->
<input type="text" id="id1" onclick="begin()" >
<button onclick="end()">停止</button>
<script>
function showTime() {
var current_time=new Date().toLocaleString();
var ele=document.getElementById('id1');
ele.value=current_time
}
var clock1;
function begin() {
if(clock1==undefined){
showTime();
clock1=setInterval(showTime,1000)
}
}
function end() {
clearInterval(clock1);
clock1=undefined;
}
</script>
</body>
</html>
实例练习
1 搜索框
<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()"> <script> function Focus(){ var input=document.getElementById("ID1"); if (input.value=="请输入用户名"){ input.value=""; } }; function Blurs(){ var ele=document.getElementById("ID1"); var val=ele.value; if(!val.trim()){ ele.value="请输入用户名"; } } </script>
2 模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
background-color:antiquewhite;
}
.shade{
position: fixed;
top: 0;
left:0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.4;
}
.model{
200px;
height: 200px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="show()">show</button>
hellohello
</div>
<div class="shade hide"></div>
<div class="model hide">
<button onclick="cancel()">cancel</button>
</div>
<script>
function show() {
var ele_shade=document.getElementsByClassName('shade')[0];
var ele_model=document.getElementsByClassName('model')[0];
ele_shade.classList.remove('hide');
ele_model.classList.remove('hide');
}
function cancel() {
var ele_shade=document.getElementsByClassName('shade')[0];
var ele_model=document.getElementsByClassName('model')[0];
ele_shade.classList.add('hide');
ele_model.classList.add('hide');
}
</script>
</body>
</html>
3 二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="provinces" >
<option value="">请选择省份</option>
</select>
<select name='' id="citys">
<option value="">请选择城市</option>
</select>
<script>
// console.log(data);
// console.log(data['河北省']);
// for (var i in data){
// console.log(i);
// }
data={'河北省':['石家庄','廊坊'],'山西':['晋城','大同'],'陕西':['西安','延安']};
var pro_ele=document.getElementById('provinces');
var city_ele=document.getElementById('citys');
for (var i in data){
var ele=document.createElement('option');
ele.innerHTML=i;
pro_ele.appendChild(ele)
}
pro_ele.onchange=function () {
console.log(this.options[this.selectedIndex]);
var citys=data[this.options[this.selectedIndex].innerHTML];
city_ele.options.length=1;
for(var i=0;i<citys.length;i++){
var ele=document.createElement('option');
ele.innerHTML=citys[i];
city_ele.appendChild(ele)
}
}
</script>
</body>
</html>
4 正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="cancelAll()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
function selectAll() {
var inputs=document.getElementsByTagName('input');
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
input.checked=true;
}
}
function cancelAll() {
var inputs=document.getElementsByTagName('input');
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
input.checked=false;
}
}
function reverse() {
var inputs=document.getElementsByTagName('input');
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
if (input.checked){
input.checked=false;
}
else{
input.checked=true;
}
}
}
</script>
</body>
</html>