⑥JavaScript DOM介绍及DOM相关操作（HTML+CSS+JavaScript简单组合运用）

阅读量：3965 次

发布时间：2019-05-24

本文共 13070 字，大约阅读时间需要 43 分钟。

JavaScript

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

在最开始我们说过，一个完整的JavaScript实现应该由以下三个部分构成：ECMAScript DOM BOM。接下来开始介绍DOM。

DOM介绍

• DOM，全称Document Object Model文档对象模型。

• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

• 文档：表示的就是整个的HTML网页文档

• 对象：表示将网页中的每一个部分都转换为了一个对象。

• 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

节点 ※

• 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。

• 比如：html标签、属性、文本、注释、整个文档等都是一个节点。

• 虽然都是节点，但是实际上他们的具体类型是不同的。

• 比如：标签称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。

• 节点的类型不同，属性和方法也都不尽相同。

文档节点（document）

• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。

• document对象作为window对象的属性存在的，我们不用获取可以直接使用。

• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

元素节点（Element）

• HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。

• 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

• 比如：

document.getElementById()

根据id属性值获取一个元素节点对象。

文本节点（Text）

• 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。

• 它包括可以字面解释的纯文本内容。

• 文本节点一般是作为元素节点的子节点存在的。

• 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。

• 例如：

元素节点.firstChild;

获取元素节点的第一个子节点，一般为文本节点。

属性节点（Attr）

• 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

• 可以通过元素节点来获取指定的属性节点。

• 例如：

元素节点.getAttributeNode("属性名");

• 注意：我们一般不使用属性节点。

使用到的相关属性和方法 ※

获取元素节点

• 通过document对象调用

getElementById()
– 通过id属性获取一个元素节点对象

getElementsByTagName()
– 通过标签名获取一组元素节点对象

getElementsByName()
– 通过name属性获取一组元素节点对象

获取元素节点的子节点

• 通过具体的元素节点调用

getElementsByTagName()
– 方法，返回当前节点的指定标签名后代节点

childNodes
– 属性，表示当前节点的所有子节点

firstChild
– 属性，表示当前节点的第一个子节点

lastChild
– 属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

• 通过具体的节点调用

parentNode
– 属性，表示当前节点的父节点

previousSibling
– 属性，表示当前节点的前一个兄弟节点

nextSibling
– 属性，表示当前节点的后一个兄弟节点

节点的修改

• 主要指对元素节点的操作。

• 创建节点document.createElement(标签名)

• 删除节点父节点.removeChild(子节点)

• 替换节点父节点.replaceChild(新节点 , 旧节点)

• 插入节点父节点.appendChild(子节点) / 父节点.insertBefore(新节点 , 旧节点)

元素节点的属性

• 获取，元素对象.属性名

例：

element.value

element.id

element.className

• 设置，元素对象.属性名=新的值

例：

element.value = “hello”

element.id = “id01”

element.className = “newClass”

其他属性

• nodeValue

– 文本节点可以通过nodeValue属性获取和设置文本节点的内容

• innerHTML

– 元素节点通过该属性获取和设置标签内部的html代码

使用CSS选择器进行查询

querySelector()

querySelectorAll()

• 这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。

• 不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。

事件的简单介绍 ※

• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

• JavaScript 与 HTML 之间的交互是通过事件实现的。

• 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

文档的加载 ※

大家会发现，上面的js代码都编写到了页面的下部。这是为了，可以在页面加载完毕以后再执行js代码。

其实也有办法，将js代码写在页面上边同时在页面加载完成后再执行。

DOM操作（html+css+javascript 简单组合运用）

练习一 ※（基本属性、方法的使用）

			
   				
   										
   			
    				
     你喜欢哪个城市?
				
     					
      北京
					
      上海
					
      东京
					
      首尔
				
     
				
     
				
     
				
     你喜欢哪款单机游戏?
				
     					
      红警
					
      实况
					
      极品飞车
					
      魔兽
				
     
				
     
				
     
				
     你手机的操作系统是?
				
     					
      IOS
					
      Android
					
      Windows Phone
				
     
			
    
			
    
     				gender:				
     				Male				
     				Female				
     
				
     
				name:

@CHARSET "UTF-8";body {
   	width: 800px;	margin-left: auto;	margin-right: auto;}button {
   	width: 300px;	margin-bottom: 10px;}#btnList {
   	float:left;}#total{
   	width: 450px;	float:left;}ul{
   	list-style-type: none;	margin: 0px;	padding: 0px;}.inner li{
   	border-style: solid;	border-width: 1px;	padding: 5px;	margin: 5px;	background-color: #99ff99;	float:left;}.inner{
   	width:400px;	border-style: solid;	border-width: 1px;	margin-bottom: 10px;	padding: 10px;	float: left;}

练习二 ※ （点击按钮切换图片）

（自备图片）

练习三 ※（全选练习）


   全选练习	
   
    		你爱好的运动是？
    全选/全不选 		
    
		
    足球		
    篮球		
    羽毛球		
    乒乓球

练习四 ※（其他方法的使用）

			
   								
   
			
   
    			我是第一个box1	 			
    
     我是box1中的div
    
		
   
		
   			
    
     我是box1中的div
    
		
   
		
   			
    
     我是box1中的div
    
		
   
		
   			
    
     我是box1中的div

练习五 ※ （增删改）

			
   		Untitled Document		
   						
   			
    				
     你喜欢哪个城市?
				
     					
      北京
					
      上海
					
      东京
					
      首尔

@CHARSET "UTF-8";body {
   	width: 800px;	margin-left: auto;	margin-right: auto;}button {
   	width: 300px;	margin-bottom: 10px;}#btnList {
   	float:left;}#total{
   	width: 450px;	float:left;}ul{
   	list-style-type: none;	margin: 0px;	padding: 0px;}.inner li{
   	border-style: solid;	border-width: 1px;	padding: 5px;	margin: 5px;	background-color: #99ff99;	float:left;}.inner{
   	width:400px;	border-style: solid;	border-width: 1px;	margin-bottom: 10px;	padding: 10px;	float: left;}

练习六 ※ （添加删除记录练习—表格的运用）

			
   		添加删除记录练习		
   						
   
			         				      Name 				      Email 				      Salary 				        			     
			     				      Tom 				      tom@tom.com 				      5000 				      					Delete				 			     
			     				      Jerry 				      jerry@sohu.com 				      8000 				      					Delete				 			     
			     				      Bob 				      bob@tom.com 				      10000 				      					Delete				 			     
		    
   
		
   			
    添加新员工
			
    
				           					       name: 					       											 				      
				      					       email: 					       											 				      
				      					       salary:

Name	Email	Salary
Tom	tom@tom.com	5000	Delete
Jerry	jerry@sohu.com	8000	Delete
Bob	bob@tom.com	10000	Delete

@CHARSET "UTF-8";#total {
   	width: 450px;	margin-left: auto;	margin-right: auto;}ul {
   	list-style-type: none;}li {
   	border-style: solid;	border-width: 1px;	padding: 5px;	margin: 5px;	background-color: #99ff99;	float: left;}.inner {
   	width: 400px;	border-style: solid;	border-width: 1px;	margin: 10px;	padding: 10px;	float: left;}#employeeTable {
   	border-spacing: 1px;	background-color: black;	margin: 80px auto 10px auto;}th,td {
   	background-color: white;}#formDiv {
   	width: 250px;	border-style: solid;	border-width: 1px;	margin: 50px auto 10px auto;	padding: 10px;}#formDiv input {
   	width: 100%;}.word {
   	width: 40px;}.inp {
   	width: 200px;}

练习七 ※ （使用DOM操作CSS）

练习八 ※ （读取元素的样式）

通过练习七可以发现一个问题，只有点过按钮一之后，按钮二才能读取到box1设置后的高度和宽度。因为通过style属性设置和读取的都是内联样式，它无法读取样式表中的样式。获取元素的当前显示的样式：元素.currentStyle.样式名。但是这种方式无法修改css的样式。

总结如下：（读取元素的样式）

box1.style.height

无法读取样式表中的样式，但是可以读取修改后的样式以及修改样式。

box1.currentStyle.width

读取样式，但是无法修改样式。IE8使用的方法。

getComputedStyle(box1,null).width

读取样式，但是无法修改样式。该方法不支持IE8及以下的浏览器。

该方法会返回一个对象，对象中封装了当前元素对应的样式。

即该部分的完整代码是：

var obj = getComputedStyle(box1,null);alert(obj.width);

练习九 ※ （其他样式操作的属性）

box1.clientWidth

获取元素的可见宽度，但是不能修改。包括内容区和内边距

box1.offsetWidth

获取元素的整个的宽度，但是不能修改。包括内容区、内边距和边框

var op = box1.offsetParent;

获取当前元素的定位父元素

box4.scrollWidth

获取元素整个滚动区域的宽度

box4.scrollLeft

获取水平滚动条滚动的距离

box4.scrollTop

获取垂直滚动条滚动的距离

练习十 ※ （注册协议看到底才能注册）

涉及到了一个新用法：info.onscroll = function(){};

该事件会在元素的滚动条滚动时触发。

欢迎亲爱的用户注册

亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册

我已仔细阅读协议，一定遵守

小结 ※※

常用的简便方法：（所有相关内容可在上述练习中找到，写在这里为了方便寻找）

function myClick(idStr, fun) {
   	var btn = document.getElementById(idStr);	btn.onclick = fun;}function getStyle(obj , name){
   	if(window.getComputedStyle){
   		//正常浏览器的方式，具有getComputedStyle()方法		return getComputedStyle(obj , null)[name];	}else{
   		//IE8的方式，没有getComputedStyle()方法		return obj.currentStyle[name];	}}function delA() {
   	var tr = this.parentNode.parentNode; //根据需要修改	var name = tr.children[0].innerHTML;	//删除之前弹出一个提示框	var flag = confirm("确认删除" + name + "吗?");	if(flag) {
   		tr.parentNode.removeChild(tr);	}	return false;}window.onload = function(){
   	var box1 = document.getElementById("box1");	//获取样式	myClick("btn01",function(){
   		alert(getStyle(box1,"width"));	});		//向标签中添加元素	myClick("btn02",function(){
   		var city = document.getElementById("city");		var li = document.createElement("li");		li.innerHTML = "广州";		city.appendChild(li);	});		//向标签中添加元素	myClick("btn03",function(){
   		var city = document.getElementById("city");		city.innerHTML += "广州
";	});		//设置拥有删除效果的超链接	var allA = document.getElementsByTagName("a");	//为每个超链接都绑定一个单击响应函数	for(var i = 0; i < allA.length; i++) {
   		allA[i].onclick = delA;	}					//比较复杂的添加元素	//向table中添加元素	myClick("btn04",function(){
   		//有value是因为，原本的标签是input的表单项		var name = document.getElementById("empName").value;		var email = document.getElementById("email").value;		var salary = document.getElementById("salary").value;							//创建一个tr		var tr = document.createElement("tr");		//设置tr中的内容		tr.innerHTML = ""+name+""+						""+email+""+						""+salary+""+						"Delete";										//获取刚刚添加的a元素，并为其绑定单击响应函数						var a = tr.getElementsByTagName("a")[0];		a.onclick = delA;								//获取table		var employeeTable = document.getElementById("employeeTable");		//获取employeeTable中的tbody		var tbody = employeeTable.getElementsByTagName("tbody")[0];		//将tr添加到tbody中		tbody.appendChild(tr); */	});}

转载地址：http://voyki.baihongyu.com/

你可能感兴趣的文章