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

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

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

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

isElement实现方法：

var testDiv = document.createElement('div');
var isElement = function (obj) {
   if (obj && obj.nodeType === 1) {//先过滤最简单的
       if( window.Node && (obj instanceof Node )){ //如果是IE9,则判定其是否Node的实例
           return true; //由于obj可能是来自另一个文档对象，因此不能轻易返回false
       }
       try {//最后以这种效率非常差但肯定可行的方案进行判定
           testDiv.appendChild(obj);
           testDiv.removeChild(obj);
       } catch (e) {
           return false;
       }
       return true;
   }
   return false;
}
var a = {
  nodeType: 1
}

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

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

var testDiv = document.createElement('div');
var isElement = function (obj) {
   if (obj && obj.nodeType === 1) {//先过滤最简单的
       if( window.Node && (obj instanceof Node )){ //如果是IE9,则判定其是否Node的实例
           return true; //由于obj可能是来自另一个文档对象，因此不能轻易返回false
       }
       try {//最后以这种效率非常差但肯定可行的方案进行判定
           testDiv.appendChild(obj);
           testDiv.removeChild(obj);
       } catch (e) {
           return false;
       }
       return true;
   }
   return false;
}
var isHTMLElement(el){
  if(isElement){
     return isXML(el.ownerDocument);
  }
  return false;
}

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的子节点，当然这只局限于元素节点之间的判断，但是对于不属于元素的节点的无法判断，所以我们需要改进相关函数：

function fixContains(a, b) {
   try {
       while ((b = b.parentNode)){
           if (b === a){
               return true;
           }
       }
       return false;
   } catch (e) {
       return false;
   }
}
var pNode = document.getElementById("p-node");
var cNode = document.getElementById("c-node").childNodes[0];
alert(fixContains(pNode, cNode));

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

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

先看看继承层次。

元素的继承层次

文本继承层次：

上面就是继承层次，接下来我们了解一下嵌套规则，那为什么要了解嵌套规则呢？假如我们不按照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> —— 错

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