南大软院大神养成计划——第九天

悠悠 2022-08-14 05:44 178阅读 0赞

今天是南大软院大神养成计划实施的第九天，今天学习的主要内容是DOM探索之基础详解篇的剩余两章内容，最后两章内容主要讲解的是“如何判断节点元素类型”和“继承层次和嵌套规则”。

先讲讲“如何判断节点元素类型”，在将这个问题之前，我们首先了解一下为什么我们要学会判断节点元素类型呢？是因为我们属性的一系列操作跟我们节点类型息息相关的，如果不知道元素是什么类型，那么我们就不知道我们是应该用直接属性操作如el.xxx=yyy还是用方法设定如el.setAttribute(xxx,yyy)，当然我们在其他的操作中也要用到节点类型的判定。元素节点判定有4个方法：![Image 1][]

根据英文意思，我们可以知道，isELement判断是否为元素节点，isHTML判断是否为HTML节点，isXML判断是否为XML节点，contains是判断节点的包含关系。

isElement实现方法：

根据代码我们知道，这个isELement函数第一层先过滤了不属于node的obj，然后根据将obj插入节点树中，然后再移除该节点，查看该过程是否发生错误，如果发生错误，则说明obj不是元素节点。

接下来看判断是否为ISHTML和isXML：

XML与html对象均支持createElement（）方法，通过比较创建的元素时传入参数的【大小写】不同的情况下，元素的nodeName是否相同来判断是哪一种文档对象。如果nodeName相同则为html对象，反之为XML对象。

最后如何判断包含关系：

var pNode = document.getElementById("p-node");  
var cNode = document.getElementById("c-node").childNodes\[0\];  
alert(pNode.contains(cNode));

dom对象里已经给我们提供了想关的函数，如果返回的是true则cNode是pNode的子节点，当然这只局限于元素节点之间的判断，但是对于不属于元素的节点的无法判断，所以我们需要改进相关函数：

这个方法就是根据对比a和b的父节点是否一样，来判断是否包含。

第五章讲师所讲的内容是继承层次和嵌套规则。

先看看继承层次。

元素的继承层次

![Image 1][]

文本继承层次：

![Image 1][]

上面就是继承层次，接下来我们了解一下嵌套规则，那为什么要了解嵌套规则呢？假如我们不按照html嵌套规则编写html文档，那么有可能我们写的代码就不会正确的解析，也就是我们无法正确的实现效果图的效果了，代码可能就变成纯文本了。下面是一些关于html的嵌套规则。

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：  
　　<div><h1></h1><p></p></div> —— 对  
　　<a href=”\#”><span></span></a> —— 对  
　　<span><div></div></span> —— 错  
　2. 块级元素不能放在<p>里面：  
　　<p><ol><li></li></ol></p> —— 错  
　　<p><div></div></p> —— 错  
　　3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：  
　　h1、h2、h3、h4、h5、h6、p、dt  
　　4. li 内可以包含 div 标签 —— 这一条其实不必单独列出来的，但是网上许多人对此有些疑惑，就在这里略加说明：  
　　li 和 div 标 签都是装载内容的容器，地位平等，没有级别之分（例如：h1、h2 这样森严的等级制度^\_^），  
　　5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：  
　　<div><h2></h2><p></p></div> —— 对  
　　<div><a href=”\#”></a><span></span></div> —— 对  
　　<div><h2></h2><span></span></div> —— 错

以上就是今天所学的知识，期待明天的学习。

[Image 1]: