DOM操作详解-优快云博客

Dom（Document）称为：文档对象模型，是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

document.getElementById（'il'）根据ID获取一个标签

document.getElementsByName('div') 根据name属性获取标签集合

document.getElementsByClassName('c1') 根据 class 属性获取标签集合

document.getElementsByTagName('') 根据标签名获取标签集合

例如：tag=document.getElementById（'il'）

html结构图

2、间接查找(在直接查找的基础下进行间接查找)

parentNode / / 父节点

childNodes / / 所有子节点

firstChild / / 第一个子节点

lastChild / / 最后一个子节点

nextSibling / / 下一个兄弟节点

previousSibling / / 上一个兄弟节点

parentElement / / 父节点标签元素

children / / 所有子标签

firstElementChild / / 第一个子标签元素

lastElementChild / / 最后一个子标签元素

nextElementtSibling / / 下一个兄弟标签元素

previousElementSibling / / 上一个兄弟标签元素

例如：tag=document.getElementById（'il'）

tag.parentNode

结果：结构图

二、操作innerText   文本    例如：document.getElementById（'il'）.innerText  输出标签中的内容。
 
    outerText 
   
 
    innerHTML   HTML内容 
   
 
    innerHTML   
   
 
    value       值 
   

       
   
 
    class操作 
   
 
     className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类 
    

     例如,如果id=il的标签中没有name的话，有添加属性class='c1'： 
   
 
     tag=document.getElementById（'il'）
tag.classname='c1'     #输出html结构图
tag.classlist      #输出列表
 
    
事件操作： 
弹窗实例：
 
     <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style>
        .hide{
            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="点我" οnclick='ShowModel();'></input>
	</div>
	<!--遮罩开始-->
	<div class='c1 hide' id='i1'></div>
	<!-- 遮罩结束 -->
	
	<div class='c2 hide ' id="i2">
	      
	     <input type="button" value="取消" οnclick='HideModel();'></input>    
	
	
	</div>
	
	<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>
 
    
　　
样式操作：
className
classList : classList.add/classList.remove
obj.style.fontSize='11px';
obj.style.backgroundColor='red';
obj.style.color='red';
属性操作：
obj.setAttributr('','');
obj.removeAttribute（）；
创建标签的两中方式：字符串方式和对象方式
 
     <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type='button' οnclick='A1();' value='+'/>
<input type='button' οnclick='A2();' value='+'/>
<div id='i1'>
	<p><input type='text'/></p>
</div>
<script>
	function A1(){
	 
	 	var tag='<p><input type="text"/></p>';
	 	document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
	  }	
	function A2(){
	 
	 	var tag=document.createElement('input');
	 	tag.setAttribute('type','text');
	 	tag.style.fontSize='11px';
	 	tag.style.color='red';
	 	var p=document.createElement('p');
	 	p.appendChild(tag);
	 	document.getElementById('i1').appendChild(p);
	  }
</script>
</body>
</html>
 
    
 
提交表单
任何标签都可以通过document 提交表单      
 

      样式、行为、结构相分离。 
     
     <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
<table border='1'; width='300px'>
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
   var MT=document.getElementsByTagName('tr');
   var len=MT.length
   for(var i=0;i<len;i++){
	   MT[i].οnmοuseοver=function(){
		   this.style.backgroundColor='red';
	   }
	   MT[i].οnmοuseοut=function(){
		   this.style.backgroundColor='';
	   }
   }
</script>
</body>
</html>
 
    
绑定事件的两种方式：
a.直接标签绑定 οnclick='xx()'  onfocus
b.先获取dom对象  然后进行绑定
this,当前触发事件的标签
a. 第一绑定方式
<input type='button' οnclick='A1();' value='+'/>
function Clickon(self){
//self 当前点击的标签
}
b.第二种绑定方式
<input id=‘i1’ type='button'>
document.getElementById('i1').οnclick=function(){
//this 代指当前点击的标签
}
 
1.冒泡
2.词法分析
 
     function t1(age){
console.log(age); //function age()
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()
 
    
　　

       
   