DOM----学习笔记

小竹节

于 2019-07-19 20:57:50 发布

阅读量117

点赞数

分类专栏：学习笔记文章标签： DOM

本文链接：https://blog.csdn.net/qq_40913582/article/details/96500781

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

DOM 文档对象模型

Document Object Model

文档：标记型文档（HTML/XML）

对象：封装了属性和行为（方法）

模型：共性特征的体现

DOM解析HTML

通过DOM的方法，把HTML全部（元素（标签），文本，属性）都封装成了对象

<span id = "spanId">文本</span>

DOM想要操作标记型文档先解析（解析器）

DOM解析HTML（浏览器就可以解析）

浏览器DOM解析HTML？

把HTML文档解析成树状结构

树

树只有一个根节点
叶子节点没有子节点
没有父节点的节点是根节点
每个节点只有一个父节点，但是可以有多个子节点
树的高度：层级

解析后提供的对象

Document:代表整个文档
Element：元素（标签）对象
Attribute:属性的对象
Text:文本对象
Node:节点对象(上面4个都属于Node)

DOM三个级别和DHTML介绍

DOM

一级DOM 只有HTML

二级DOM 在一级基础上添加功能，css的支持

三级DOM xml1.0的支持

DHTML不是一种编程语言

动态HTML语言

html:封装数据

css：设置样式（显示效果）

dom:提供对象，操作HTML，解析HTML

js：提供逻辑

Document:代表整个文档（树形结构）

方法：

docoument.getElementById("id的值")	//通过元素的id的属性获取元素(标签)的对象

docoument.getElementsByName("name属性值")	//通过名称获取元素对象的集合（返回数组）

getElementsByTagName("标签名称")		//通过标签名称获取元素对象的集合（返回数组）

write("文本的内容(html的标签)")	//把文本内容写道浏览器上

createElement("元素名称");	//创建元素对象

createTextNodeA("文本内容");		//创建文本对象

appendChile("对象”)		//添加子节点

一个添加元素的例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
	
</body>
<script type="text/javascript">
	/*
	 	在ul无序列表下，添加一个子节点<li>深圳</li>
	 	
	 	创建元素对象<li></li>
	 	创建文本对象 深圳
	 	把深圳添加到li的下面。作为li的子节点
	 	把li添加到ul下面，作为ul的子节点
	 * */
	function add(){
		var li = document.createElement("li");
		var sz = document.createTextNode("深圳");
		li.appendChild(sz);
		var ul = document.getElementsByTagName("ul")[0];
		ul.appendChild(li);
		
	}
	add();
</script>
</html>

Element对象

获取元素对象

	 getAttribute("属性名称");	//获取属性的值
	 setAttribute("属性的名称","属性的值");		//设置或者修改属性的值
	 removeAttribute("属性名称");	//删除属性

获取元素下的所有子节点

	 	childNodes()		//包含空格和回车
	 	Element.getElementsByTagName()

例子：

<ul id="ulId">
	<li>北京</li>
	<li>上海</li>
	<li>广州</li>
</ul>

<script type="text/javascript">
	
		//修改
//		input.setAttribute("value","lisi");
//		alert(input.getAttribute("value"));
		
//		input.removeAttribute("value");
//		alert(input.getAttribute("value"));
	
	//===========================
	var ul = document.getElementById("ulId");
	var lis = ul.childNodes;
	//alert(lis.length);		//7，包含了空格和回车
	
	var lis2 = ul.getElementsByTagName("li");
	alert(lis2.length);
</script>

Node:节点对象

nodeName:节点名称
nodeType:节点类型

nodeValue:节点的值

  	元素				属性				文本
   	nodeName	大写的标签名称	属性名			#text
   	nodeType	1				2				3
   	nodeValue	null			属性的值			文本的内容
   	
   	
   parentNode		获取父节点，始终返回的是一个元素节点
   childNodes		所有子节点，包含空格和回车
   firstChild		第一个子节点
   firstElementClid	第一个元素子节点,可以解决空格之类的问题
   lastChild		最后一个子节点
   nextSibling	下一个兄弟节点
   previousSibling 上一个兄弟节点


  <input type="text" id="nameId" value="zhangsan"/>
  
  <span id="spanId">
  	我是span的区域
  </span>
  <script type="text/javascript">
  
  var input = document.getElementById("nameId");
  //		alert(input.nodeName);		//INPUT
  //		alert(input.nodeType);		//1
  //		alert(input.nodeValue);		//null
  
  var attr = input.getAttributeNode("type");
  //		alert(attr.nodeName);		//type
  //		alert(attr.nodeType);		//2
  //		alert(attr.nodeValue);		//text
  
  var span = document.getElementById("spanId");
  var text = span.firstChild;
  alert(text.nodeName);		//#text
  alert(text.nodeType);		//3
  alert(text.nodeValue);		//我是span的区域

一些特殊的使用场景

<ul>
	<li>北京</li>
</ul>

若果通过ul获取北京的子节点，使用的是 ul.firstElememtChild;	获取北京的子节点(IE9-11,Chrome,FireFox)
但是如果是IE6-8，需要使用firstChild

<span id="spanID">
	文本内容
</span>
使用span的标签获取span中间的文本类容(也是对象),需要使用firstChild(不管什么浏览器)

方法

hasChildNodes()		检查是否包含子节点
hasAttributes()		检查是否包含属性

操作DOM节点树

appendChild(node)	父节点调用，在末尾添加子节点
insertBefore(new,old)	父节点调用，在指定节点之间添加子节点
replaceChild(new,old)	父节点调用， 替换节点
removeChild(node)		父节点调用，删除节点

cloneNode(boolean)		复制节点,不是父节点调用
	boolean:  如果是true，复制子节点   
			  如果是flase，不复制子节点，比如一个有字的按钮，这样复制就没有字了

innerHTML

innerHTML的属性

获取文本内容

设置文本内容

<span id="spanId">
	这是span的区域
</span>
	
<span id="spanId2"></span>

<script type ="text/javascript">
var span = document.getElementById("spanId");
//		alert(span.innerHTML)

var span2 = document.getElementById("spanId2");
span2.innerHTML = "这是span的区域2";
alert(span2.innerHTML);
</script>

事件

onClick	点击事件
onload	加载事件
onfocus	获取焦点事件
onblur	失去焦点事件

鼠标移动事件

onmousemove		//移动	
onmouseout		//移除
onmouseover		//悬停

鼠标点击事件

onclick
ondbclick	//双击

加载和卸载

onload
onunload	//卸载

获取焦点和数去焦点

onfocus
onblur

键盘事件

onkeyup	//按下抬起

改变事件

onchange

控制表单的提交

onsubmit



<span id="spanId">
	这是span的区域
</span>
	
	
<span id="spanId2"></span>
<h3>获取焦点的事件</h3>
输入姓名：<input type="text" name="username"  onfocus="run()" onblur="run2()"/><span id="uspan"></span>

<script type="text/javascript">
	var span = document.getElementById("spanId");
//		alert(span.innerHTML)

	var span2 = document.getElementById("spanId2");
	span2.innerHTML = "这是span的区域2";
	alert(span2.innerHTML);
	
	function run(){
		var uspan = document.getElementById("uspan");
		uspan.innerHTML = "您只能输入特殊的字符";
	}
	function run2(){
		var uspan = document.getElementById("uspan");
		uspan.innerHTML = "";
	}
</script>

全选/全部选/反选的练习

思路：

全选：获取名称是love的所有input标签

循环遍历。为了拿到每一个input标签，这只checked

	<input type="checkbox" id="boxId" onclick="selOrNo()" />全选/全部选<br />
	<input type="checkbox" name="love" />篮球<br />
	<input type="checkbox" name="love" />足球<br />
	<input type="checkbox" name="love" />排球<br />
	<input type="checkbox" name="love" />棒球<br />
	<input type="checkbox" name="love" />冰球<br />
	<input type="button" value="全选" onclick="selAll()" />
	<input type="button" value="全不选" onclick="selNo()" />
	<input type="button" value="反选" onclick="selOth()" />

	<script type="text/javascript">
	function selAll(){
		//获取名称是love的所有input标签，返回数组
		var inputs = document.getElementsByName("love");
		for (var i=0 ;i<inputs.length; i++) {
			var input = inputs[i];
			//设置checked
			input.checked = true;
			//input.setAttribute("checked","false");
		}
	}
	
	function selNo(){
		var inputs = document.getElementsByName("love");
		for (var i = 0 ;i<inputs.length;i++) {
			var input = inputs[i];
			input.checked = false;
		}
	}
	
	//反选
	function selOth(){
		var inputs = document.getElementsByName("love");
		for (var i = 0 ;i<inputs.length;i++) {
			var input = inputs[i];
			//判断
			if(true == input.checked){
				input.checked = false;
			}else{
				input.checked = true;
			}
		}
	}
	
	//全选全部选
	function selOrNo(){
		var box = document.getElementById("boxId");
		//判断
		if(box.checked == true){
			//调用全选方法
			selAll();
		}
		else{
			selNo();
		}
	}
	
</script>

小竹节

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM----学习笔记

DOM 文档对象模型Document Object Model文档：标记型文档（HTML/XML）对象：封装了属性和行为（方法）模型：共性特征的体现DOM解析HTML通过DOM的方法，把HTML全部（元素（标签），文本，属性）都封装成了对象<span id = "spanId">文本</span>DOM想要操作标记型文档先解析（解析器）DOM解析HTML...
复制链接

扫一扫