DOM基础讲解

最新推荐文章于 2023-09-05 09:26:32 发布

大厂女程序媛

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量424

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/tyutjavalily/article/details/51726505

版权

javascript 专栏收录该内容

9 篇文章

订阅专栏

1，什么是DOM？

DOM是文档对象模型，是为了文档的节点树，更好的操作文档节点，实现动态开发。

2，文档类型：

HTML：更好的显示数据；

XML：存放格式化的数据；

3，节点的类型：

元素节点：1
属性节点：2
文本节点：3
注释节点：8
文档节点（不是根节点）：9
文档类型节点：10
文档片段节点：11

4，nodeName+nodeValue:

  
  <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nodeName&nodeValue</title>
</head>
<body>
	<div id="container">我是节点</div>
	<!-- 我是注释节点 -->
	<script type="text/javascript">
		var divNode=document.getElementById('container');
		console.log(divNode.nodeName+"/"+divNode.nodeValue);  //DIV/null
		var atrrNode=divNode.attributes[0];  //得到属性
		console.log(atrrNode.nodeName+"/"+atrrNode.nodeValue);  //id/container
		var textNode=divNode.childNodes[0];
		console.log(textNode.nodeName+"/"+textNode.nodeValue);  //#text/我是节点
		var commentNode=divNode.nextSibling.nextSibling;
		console.log(commentNode.nodeName+"/"+commentNode.nodeValue);  //#comment/ 我是注释节点 
		console.log(document.doctype.nodeName+"/"+document.doctype.nodeValue);  //html/null
		var frag=document.createDocumentFragment();
		console.log(frag.nodeName+"/"+document.nodeValue);  //#document-fragment/null
	</script>
</body>
</html>

5.domready:

什么是domReady ：html通过浏览器解析会生成dom节点，在刷新url地址的时候，dom树构建，dom树构建完成，就是domReady

6,元素节点的判断：

   
   	var isElement=function (obj) {
			if( obj && obj.nodeType===1) {
				 if(window.Node && (obj instanceof Node)){  //ie9的
				 	return ture;
				 } 
				 try { 
				 	divNode.appendChild(obj);
				 	divNode.removeChild(obj);
				 } catch(e) {
				 	return false;
				 }
				 return ture;
			}
			return false;
		}

7，元素节点的分类：

元素节点分为html节点和xml节点；
html是xml的子集，xml矢量绘图分为svg，vml
html和xml的最大的区别是html节点的nodeName是大写

     
     		// 判断节点是否为元素节点
		var isElement=function (obj) {
			var testDiv=document.createElement('div');
			if( obj && obj.nodeType===1) {
				 if(window.Node && (obj instanceof Node)){  //ie9的
				 	return true;
				 } 
				 try { 
				 	testDiv.appendChild(obj);
				 	testDiv.removeChild(obj);
				 } catch(e) {
				 	return false;
				 }
				 return ture;
			}
			return false;
		}
		// 判断是否为html文档类型
		var isHtml=function (doc) {
			return doc.createElement('p').nodeName === doc.createElement('p').nodeName;
		};
		// 判断元素是否为html节点
		var isHtmlNode=function (el) {
			 if(isElement(el)){
			 	return isHtml(el.ownerDocument); //ownerDocument 返回节点所属的根元素
			 } 
			 return false;
		}