干货JavaScript DOM编程艺术学习笔记7-9

Posted 2020-10-02

七、动态创建标记

在文档中不写占位图片和文字代码，在能调用js的情况下动态创建，文档支持性更好。

在原来的addLoadEvent prepareGallery showPic的基础上增加函数preparePlaceHolder

最后调用preparePlaceHolder和prepareGallery两个函数

function preparePlaceHolder(){

   //对象检测

   if(!document.createElement) return false;

   if(!document.creatTextNode) return false;

   if(!document.getElementById) return false;

   if(!document.getElementById("imagegallery")) return false;

   //创建占位图片元素

   var placeholder=document.createElement("img");

   placeholder.setAttribute("id" ,"placeholder");

   placeholder.setAttribute("src" ,"images/placeholder.gif");

   placeholder.setAttribute("alt" ,"my image gallery");

   //创建文本段元素节点

   var description=document.createElement("p");

   description.setAttribute("id","description");

   //创建文本节点

   var destext=document.createTextNode("choose an image");

   description.appendChild(destext);

   var gallery=document.getElementById("imagegallery");

   //将placeholder插入gallery后

   insertAfter(placeholder,gallery);

   //将description插入placeholder后

   insertAfter(description,placeholder);   

}

function insertAfter(newElement, targetElement){

   //取出目标元素的父元素

   var parent=targetElement.parentNode;

   //如果目标元素是父元素最后一个子节点，则追加到父元素最后

   if(parent.lastChild==targetElement){

      parent.appendChild(newElement);

   }

   //如果不是，则插入到目标元素的下一个兄弟元素之前

   else{

      parent.insertBefore(newElement, targetElement.nextSibling);

   }

}

注：

innerhtml：需要插入一大段内容时用，比如testdiv.innerHTML="<p>I insert <em>this</em> content</p>";可以放在外部js中与文档分离。属于html专用属性，其他标记语言不支持。

document.creatElement(nodeName):添加元素节点。

document.creatTextNode(text):添加文本节点。

parent.appendChild(child):使child元素成为parent元素最后一个子节点。

targetElement.parentNode.insertBefore(newElement, targetElement):将newElement插入targetElement之前。

targetElement.nextSibling:targetElment元素的下一个兄弟元素。

Ajiax和Hijax后面讲。

 

八、充实文档内容

把文档中的现有信息用另一种结构呈现，比如缩略语列表，文献来源链接，快捷键清单。基本步骤都是，先创建一个特定元素（如缩略语）构成的节点集合，然后循环遍历这个集合，在每次循环里创建一些标记，最后把新创建的标记插入到文档里。

缩略语列表：

在文档中是<p>The <abbr title="world wide web consortium">w3c</abbr></p>用abbr来标记，里面的title内容不显示，只显示文本w3c

function displayAbbreviations(){

   if(!doucument.getElementsByTagName||!document.createElement||!document.createTextNode) return false;

   //取得所有缩略语元素

   var abbreviations=document.getElementsByTagName("abbr");

   if(abbreviations.length<1) returen false;

   //创建存储数组

   var defs=new Array();

   //遍历缩略语元素

   for(i=0; i<abbreviations.length; i++){

       var current_abbr=abbreviations[i];

      //如果是空的继续下一个循环

      if(current_abbr.childNodes.length<1) continue;

      //存储对应的key和defination

      var key=current_abbr.lastChild.nodeValue;

      var defination=current_abbr.getAttribute("title");

      defs[key]=definition;

   }

   //创建定义列表

   var dlist=document.createElement("dl");

   //遍历缩略语数组defs

   for(key in defs){

      //为每一个创建定义标题dt对应key

      var dtitle=document.createElement("dt");

      var dtitle_text=document.createTextNode(key);

      dtitle.appendChild(dtitle_text);

      //创建定义描述dd对应defination

      var ddesc=document.createElement("dd");

      var ddesc_text=docuement.createTextNode(defination);

      ddesc.appendChild(ddesc_text);

      //将每组dt dd添加到列表dl

      dlist.appendChild(dtitle);

      dlist.appendChild(ddesc);      

   }

   if(dlist.childNodes.length<1) return false;

   //将定义列表添加到页面

   document.body.appendChild(dlist);

}

文献来源连接表：

在页面中是blockquote的cite属性：<blockquote cite="http://www.w3.org/DOM"><p></p></blockquote>，想把cite内内容添加到p的最后。在页面中用sup元素包装，显示为上标。

function displayCitations(){

   if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;

   //取得所有引用

   var quotes=document.getElementsByTagName("blockquote");

   //遍历引用

  for(i=0; i<quotes.length; i++){

      //如果没有cite属性进入下一个循环

      if(!quotes[i].getAttribute("cite")) continue;

      //取出cite属性

      var url=quotes[i].getAttribute("cite");

      //取得引用中所有元素节点

      var quoteChildren=quotes[i].getElementsByTagName("*");

      //如果引用中没有元素节点，继续循环

     if(quotoChildren.length<1) continue;

     //取得引用中最后一个元素节点

    var elem=quoteChildren[quoteChildren.length-1];

     //创建标记a

     var link=document.createElement("a");

     var link_text=document.createTextNode("source");

     link.appendChild(link_text):

     link.setAttribute("href",url);

     //封装到sup元素里

     var superscript=document.createElement("sup");

     superscript.appendChild(link);

     //添加到引用的最后一个元素里

     elem.appendChild(superscript);

   }

}

显示快捷键清单：

a元素的accesskey属性，如<a href="index.html" accesskey="1">Home</a>，方法与上同。

 

九、CSS-DOM

1、style属性

通过DOM style属性获取样式：elem.style.fontFamily，可以识别速记属性，另外有连接线的属性名在dom中采用驼峰法表示。

但是，这种方式只能获取内嵌在html代码里的属性声明，外部链接的样式表和文档head里声明的style属性，用这种方法都提取不到。

用这种方式设置样式：para.style.font="2em ‘Times‘, serif";

2、什么时候使用DOM设置属性

一般情况下样式应该用CSS去设置，只有当CSS无法找到想要处理的目标元素，或者是用CSS找目标元素的方法还未得到广泛的支持时，采用DOM的方法，另外用DOM的方法尽量不直接设置style属性，而是更新className属性。

（1）根据元素节点的位置设置样式styleHeaderSiblings

（2）遍历一个节点集合设置有关元素的样式stripeTables

（3）在事件发生时设置有关元素的样式highLightRows

（1）：根据元素在节点树的位置来设置样式

function styleHeaderSiblings(){

   //对象检测

   if(!document.getElementsByTagName) return false;

   //选出h1元素

   var headers=document.getElementsByTagName("h1");

   var elem;

   for(var i=0; i<headers.length; i++){

      //找到header后面一个元素节点

      elem=getNextElement(headers[i].nextSibling);

      //为该元素增加一个属性，而不是改变属性

      addClass(elem,"intro");

   }

}

function getNextElement(node){

   //获取下一个元素节点，而不是下一个节点

   if(node.nodeType==1) return node;

   if(node.nextSibling){

      return getNextElement(node.nextSibling);

   }

}

function addClass(element,value){

   if(!element.className) element.className=value;

   else{

      element.className+=" intro";

   }

}

最后在CSS中设置intro类的属性：.intro{font-weight:bold; font-size:1.4em};

（2）：根据某种条件反复设置某种样式

function stripeTables(){

   if(!document.getElementsByTagName) return false;

   //取出所有列表

   var tables=document.getElementsByTagName("table");

   var odd,rows;

   //遍历列表

   for(var i=0; i<tables.length; i++){

      odd=false;

      //取出列表所有行

      rows=tables[i].getElementsByTagName("tr");

      for(var j=0; j<rows.length; j++){

         //根据行的奇偶性设置属性

         if(odd==true){

            addClass(rows[j],"odd");

            odd=false;

         }

         else{

             odd=true;

         }

      }

   }

}

再在CSS中设置odd类样式： .odd{background-color:#ffc};

（3）：根据相应事件设置样式

function highLightRows(){

   if(!document.getElementsByTagName) return false;

   var rows=document.getElementsByTagName("tr");

   for(var i=0; i<rows.length; i++){

      rows[i].onmousover=function(){this.style.fontWeight="bold";}

      rows[i].onmouseout=function(){this.style.fontWeight="normal";}

   }

}