DOM解析HTML

最新推荐文章于 2021-06-16 00:20:47 发布
最新推荐文章于 2021-06-16 00:20:47 发布
阅读量434 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vridis_h/article/details/77233188
版权 
<!--*DOM  文档对象模型
	*Document Object Model
	*文档：标记型文当（html/xml）
	*对象：封装了属性和行为的实例
	*模型：共性特征的体现
	
	*DOM解析HTML
		*通过DOM的方法，把HTML全部（元素[标签]，文本，属性）都封装成了对象
			*<span id="spanId">文本</span>
		*DOM想要操作标记型文档，必须要先解析（解析器）
			*DOM解析HTML（浏览器可以解析HTML，所以不用我们再创建解析器）
		*浏览器通过DOM解析HTML？
			*树只有一个根节点
			 没有子节点的节点交树叶
			 没有父节点的节点是根节点
			 每个节点只有一个父节点，可以有多个子节点
			 树的高度：层级
			*Document：代表整个文档，即整个树
			 Element：元素（标签）对像
			 Attribute：属性对象
			 Te=xt：文本对象
			 Node：节点对象，是以上对象的父类
		*DOM的三个级别
			*level1：将HTML文档封装成对象
			*level2：在level1的基础上添加了新的功能，对时间和CSS样式的支持
			*level3：支持xml1.0德系新特性
		*DHTML不是一种编程语言
			*HTML：封装数据，通过各种标签。eg：<span>被封装的数据</span>
			*CSS：设置样式（显示效果）
			*DOM：操作HTML（解析HTML）
			*JS：提供逻辑（判断，循环语句）
		*Document：代表整个文档
			*方法：
				getElementById("id值")：（经常使用）通过元素的id的属性获取元素的兑现
				getElementsByName("name属性值")：通过名称获取元素对象的集合（返回的是数组）
				getElementsByTagName("标签的名称")：通过标签名称来获取对象的集合（返回的是一个数组）
				
				write("文本的内容（HTML标签）")：把文本的内容写到浏览器上
				*练习：在ul无序列表下，添加一个子节点。
					*步骤：创建元素对象<li>深圳</li>
						   document.createElemnt
						   创建文本对象  深圳
						   document.createTextNode
						   把深圳添加到li的下面，作为li的子节点
						   li.appendChild(text)
						   把li添加到ul下面，作为ul的子节点
						   ul.appendChild(li) 
		*Element对象
			*获取元素对象
				*getAttribute("属性名称")：获取属性值
				*setAttribute("属性名称","属性的值")：设置或者修改属性的值
				*removeAttribute("属性名称")：删除属性
			
				*获取元素下的所有子节点(**************)
					*Element.getElementsByTagName
					
		*Node：节点对象
			*nodeName：节点名称
			*nodeType：节点类型
			*nodeValue：节点值
				 
			//此时不能获取span标签里面的文本
			<span>文本</span>
							元素                属性            文本	
			nodeName        大写的标签名        属性名称        #text
			nodeType        1                   2               3
			nodeValue       null                属性的值        文本的内容
			
			*parentNode：获取父节点（返回的永远是一个元素节点），用子节点的对象去调用
			*childNodes：获取所有子节点
			*firstChild：第一个子节点
			*lastChild：最后一个子节点
			*nextSibling：上一个兄弟节点
			
			*如果通过ul获取北京子节点，使用ul.firstElementChild
				*如果使用的是IE6-8，使用ul。firstChild
			<span id="spanId">文本</span>
			*使用span的标签获取span中间的文本内容，需要使用firstChild(不管是什么浏览器)
		
			*方法：
				*hasChildNodes()：检查是否包含子节点
				*hasAttributes()：检查是否包含属性
				
				*appendChild(node)：父节点调用，在末尾添加子节点
				*insertBefore(new,old)：在指定节点之前添加子节点
				*replaceChild(new,old)：替换节点，父节点调用
				*removeChild("node")：删除节点，父节点调用
				*cloneNode(boolean)：复制节点，不是父节点调用
					*true：复制子节点，即可以复制里面包含的内容
					*false：不复制子节点，默认值
					*谁想复制，谁就去调用。

		*innerHTML：获取和设置文本内容
			*
		*事件
			*onclick  点击事件
			*onload   加载事件
			*onfocus  获取焦点事件
			*onblur   失去焦点事件
		
		*全选/全不选/反选练习
			<input type="checkbox" />
			*默认值，checked，选中
-->
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<body>
				<h3>全选/全不选/反选练习</h3>
				<h4>全选</h4>
				<input type="checkbox" id="boxid" οnclick="selectAllOrNone()"/>全选/全不选</br>
				<input type="checkbox" name="hobby"/>篮球</br>
				<input type="checkbox" name="hobby"/>足球</br>
				<input type="checkbox" name="hobby"/>排球</br>
				<input type="checkbox" name="hobby"/>冰球</br>
				<input type="button" value="全选" οnclick="selectAll()"/>
				<input type="button" value="全不选" οnclick="selectNone()">
				<input type="button" value="反选" οnclick="selectOpposite()">
				<hr/>
				<ul id="ulId">	
					<li>北京</li>
					<li id="sh">上海</li>
					<li>广州</li>
				</ul>
				<ul>
					<li>小时代1</li>
					<li id="sd1">小时代2</li>
					<li>小时代3</li>
				</ul>
				<input type="text" id="id" value="zhangsan"/>
				
				<span id="spanId">我是span的区域</span>
				<hr/>
				<button id="buttonId">   
					我是按钮
				</button>
				<span id="spanId1">span区域</span>
				<span id="spanId2"></span>
				
				<hr/>
				<h3>获取焦点事件</h3>
				输入姓名：<input type="text" name="username" οnfοcus="focus()" οnblur="losefocus()"/><span id="uspan"></span></br>
				输入密码：<input type="password" name="password"/><span id="uspan"></span>
				
				
</body>
				<script type="text/javascript">
				/*
				思路：
				全选：获取名称是hobby的所有input标签
					  循环遍历，为了拿到每一个input标签，同时，设置checked
				*/
				function selectAll()
				{
					//获取名称是hobby的所有input标签
					var hobbys=document.getElementsByName("hobby");					
					for(var i=0;i<hobbys.length;i++)
					{
						//循环遍历，为了拿到每一个input标签
						var hobby=hobbys[i];
						//设置checked
						//推荐使用，只操作内存中的对象
						hobby.checked=true;
						//这个方法会在标签上面加上那个属性,而且只要有那个属性，就会选中，不论后面的值设置的是null或者其他
						//hobby.setAttribute("checked","checked");
					}
				}
				//全不选
				function selectNone()
				{	
					var hobbys=document.getElementsByName("hobby");					
					for(var i=0;i<hobbys.length;i++)
					{
						var hobby=hobbys[i];
						hobby.checked=false;
						//如果上面使用的是setAttribute下面setAttributefalse就没用，必须要使用removeAttribute("checked")才能生效						
					}
				}
				
				//反选
				function selectOpposite()
				{
					var hobbys=document.getElementsByName("hobby");					
					for(var i=0;i<hobbys.length;i++)
					{
						var hobby=hobbys[i];
						//判断当前标签的checked的值是否为true，为true就取消选中
						if(hobby.checked==true)
						{
							hobby.checked=false;
						}
						//否则就选中
						else
						{
							hobby.checked=true;
						}
						//简单操作
						//hobby.checked=!hobby.checked;
					}
				}
				
				function selectAllOrNone()
				{
					var box=document.getElementById("boxid");
					if(box.checked==true)
					{
						selectAll();
					}
					else
					{
						selectNone();
					}
				}
				
				
				//================================================================
				//var input=document.getElementById("id");
				//alert(input.value);
				//alert(input.getAttribute("value"));
				//input.setAttribute("value","zhaosi");
				//alert(input.getAttribute("value"));
				//input.removeAttribute("value");
				//alert(input.getAttribute("value"));
				
				//=========================================================
				//var ul=document.getElementById("ulId");
				//之前写成方法去了，没跳出来，其实是属性
				//var lis=ul.childNodes;
				//alert(lis.length);
				//此处的长度包含空格的个数
				//var li=ul.getElementsByTagName("li");
				//alert(li.length);
				//用元素节点调用getElementsByTagName方法，获取到的就是下面所有子节点
				
				//=========================================================
				
				//创建元素对象
				//var li=document.createElement("li");
				//创建文本对象
				//var text=document.createTextNode("深圳");
				//把文本对象添加到元素对象下面，作为子节点
				//li.appendChild(text);
				//获取ul
				//var uls=document.getElementsByTagName("ul")[0];
				//把元素对象添加到ul下面，作为子节点
				//uls.appendChild(li);
				
				//===========================================================
				//获得标签的对象
				//var input=document.getElementById("id");
				//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 spantext=span.firstChild;
				//alert(spantext.nodeName);#text
				//alert(spantext.nodeType);3
				//alert(spantext.nodeValue);我是span的区域
				
				//var ul=document.getElementById("ulId");
				//var li=ul.firstElementChild;
				//alert(li.nodeType);
				//alert(ul.hasChildNodes());
				//alert(ul.hasAttributes());
				
				//点击上海，用小时代2替换上海
				//function run()
				//{
				//	alert("heheh");
				//}
				//document.getElementById("sh").onclick = function()
				//{
					//var sh=document.getElementById("sh");
					//var xsd2=document.getElementById("sd1");
					//var ul=sh.parentNode;
					//ul.replaceChild(xsd2,sh);
					
					//this关键字，代表当前对象
					//var ul=this.parentNode;
					//var xsd2=document.getElementById("sd1");
					//ul.replaceChild(xsd2,this);
					
					//删除节点
					//this.parentNode.removeChild(this);
					//var sh=document.getElementById("sh");
					//var ul=sh.parentNode;
					//ul.removeChild(sh);
				//};
				
				//复制button按钮，添加到span标签中间。
				//var btn=document.getElementById("buttonId");
				//var newBtn=btn.cloneNode(true);
				//var span=documents.getElementById("spanId1");
				//span.appendChild(newBtn);
				
				//var span=document.getElementById("spanId1");
				//alert(span.innerHTML);
				//var span2=document.getElementById("spanId2");
				//span2.innerHTML="<font color='red'>span2</font>";
				
				//焦点=============================================================
				//提示输入的信息
				//function focus()
				//{
				//此处的获取焦点之后一直不能显示，未找到错误原因
				//	var userspan=document.getElementById("uspan");
				//	userspan.innerHTML="您只能输入特殊字符";
				//}
				//function losefocus()
				//{
					//获取用户输入的姓名
					//把用户输入的数据传入到后台，在后台做匹配操作，后台处理完成，返回结果。
				//	var userspan=document.getElementById("uspan");
				//	userspan.innerHTML="用户名已存在";
				//}
				
				//全选==============================================================
				</script>
</html>				
		
记事本里面的笔记腾过来就没有格式了，奇怪了，只有放在代码里面了。				
其实前端的方法都不是很难，但是因为太多了，所以用得不输，多练练就好了。

Vridis_h
关注
php使用simple_html_dom解析HTML示例
10-21
在使用simple_html_dom解析HTML文档时，常用的方法包括获取网页的DOM对象，以及使用选择器来查找HTML元素。例如，使用file_get_html函数可以从指定的URL获取网页的DOM对象。一旦获取了DOM对象，就可以利用简单的选择...
DOM解析html
weixin_30469895的博客
06-12 385
通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了document对象。 　　* DOM解析HTML(可以使用浏览器解析HTML)。 　　* 浏览器DOM解析HTML： 　　　　DOM会把HTML解析成树状结构。 　　　 注意：Node对象是Document、Element、Attribute、Text四个对象的父类，四个对象都属于节点对象。 * DHTML不是一种...
DOM解析HTML文件
分享经验，共同进步.
08-05 1647
源代码如下：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >    利用Dom技术解析HTML            //检查用户名是否为空        function checkUserName()        {            var name =
图解分析如何dom解析HTML
风动云彩
03-12 261
dom解析结构html,Dom详解
weixin_34684706的博客
06-10 737
DOMJavaScript 的组成组成部分说明Ecmascript描述了该语言的语法和基本对象DOM描述了处理网页内容的方法和接口BOM描述了与浏览器进行交互的方法和接口DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM 以树结构表达 HTML 文档。获取元素getElementByI...
simplehtmldom:这是简单HTML DOM解析器的镜像，网址为
05-07
PHP简单HTML DOM解析器 simplehtmldom是用于PHP的快速可靠HTML DOM解析器。 主要特征 纯粹基于PHP的DOM解析器（无需XML扩展名）。 适用于格式正确且已损坏HTML文档。 加载网页，本地文件和文档字符串。 支持CSS...
DOM.rar_DOM_HTML dom_dom树解析
09-21
学习DOM解析和操作对于Web开发人员来说非常重要，它能够帮助开发者更好地理解页面结构，实现动态效果，提高用户体验。理解DOM的工作原理，熟悉各种DOM方法和属性，可以有效提升开发效率，使得对网页内容的控制更为...
DOM_XML.rar_DOM_dom xml_dom xml java_dom解析xml_java解析xml
09-21
标题中的"DOM_XML.rar"可能是一个包含DOM解析XML相关示例的压缩文件，"DOM_dom xml_dom xml java_dom解析xml_java解析xml"这部分描述了文件的主要内容，即关于DOM（Document Object Model）在XML解析中的应用，特别...
html dom页面解析,HTML DOM 详解
weixin_35545176的博客
06-03 483
警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：.DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点HTML DOM 节点树...
HTML中DOM解析篇1--nodeType\nodeValue\nodeName
LeapMotion1的博客
10-10 429
1. 各DOM的定义和用法nodeType 属性返回以数字值返回指定节点的节点类型，类型共有12种，常用到的有3种， nodeType=1: 元素节点 nodeType=2: 属性节点 nodeType=3: 文本节点 针对不同节点类型，nodeValue和nodeName返回不同值：
探索解析HTMLDOM元素的秘密（一）
qq_41672008的博客
07-21 350
探索解析HTMLDOM元素的秘密 使用html创建DOM对象轻而易举，但是使用javascript创建DOM对象会稍微显得有些麻烦，如下： const element = document.createElement("h1") element.id = "h1" element.innerHTML = "Hello World" document.body.appendChild(eleme...
Dom解析Html文档中的元素
hongmeikaile的专栏
03-17 6019
Dom解析Html文档中的元素一、理论Dom我们并不陌生，之前我写过一篇XML的解析方法，里面有一种解析方法叫Dom4j，其实Dom4j和Dom的区别就是版本高了点、功能更强了一点，其实本质是一样的，都是用来解析文档。DOM： DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一
DOM、HTML DOM、XML DOM关系的深度解析
爱看书的昌 的博客
10-24 2815
首先讲一讲DOM是什么。W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准—DOM。 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。 DOM“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式
【浏览器渲染原理】解析和DOM树构建之HTML解析器
热门推荐
青青木屋
02-13 1万+
HTML解析器的任务是将HTML标记解析成解析树。 HTML的词汇和语法在W3C规范中进行了定义。 HTML的定义采用了DTD（DocumentType Definition，文档类型定义）。 解析树是由DOM（Document Object Model）元素和属性节点构成的树结构，根节点是Document对象。 DOM与标记是一一对应的。
使用dom对html文档进行解析
红豆和绿豆的博客
11-16 401
将html文档映射到内存中，然后操作内存中的对象。从而就可以动态的修改页面上的值。 将一个html文档映射到内存之后，整个内存类的继承图，就是上面这个图所示的。 HTML元素之间的包含关系如下图所示：
DOM详解
m0_48224507的博客
06-10 5527
文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素，并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素，并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM
dom解析html文件,整理一下浏览器解析HTML并生成DOM的流程
weixin_42172972的博客
06-16 420
整理一下浏览器编译html的思路：编译器对象的名字是HTMLLexicalParser。给HTMLLexicalParser一个receiveInput方法用来接收html字符，this.receiveInput = (char) => {if (state === null) {throw new Error('there is an error')} else {state = stat...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值