Dom编程艺术1-平稳退化

1.兼容getElementsByClassName

function getElementByClassName(node,classname){
    if(node.getElementsByClassName){
        //使用现有的方法
        return node.getElementsByClassName(classname);
    } else {
        var results=new Array();
        var elems = node.getElementsByTagName("*");
        for(var i=0;i<elems.length;i++){
            if(elems[i].className.indexOf(classname) != -1){
                results[results.length] = elems[i];
            }
        }
    }
}

2.获取属性getAttribute,getAttribute

var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

3.value 和 src

//下面两个等价
element.value="new value";
element.setAttribute("value","new value");

element.src="href";
element.setAttribute("src","new value");

4.childNodes

用下面语法获取节点的nodeType属性

node.nodeType
//nodeType属性共有12种可取值，但其中仅有3种有价值
1.元素节点的nodeType 属性值为1
2.属性节点的nodeType 属性值为2
3.文本节点的nodeType 属性值为3
```
如果想获得一个文本节点的值
```
node.nodeValue;
```
获取第一个和最后一个节点
```
node.firstChild == node.childNodes[0]
node.lastChild == node.childNodes[node.childNodes.length-1]
```
具体应用，动态切换图片
```
function showPic(whichpic) {
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text = whichpic.getAttribute("title");
  var description = document.getElementById("description");
  description.firstChild.nodeValue = text;
}
<a href="images/fireworks.jpg" title="A fireworks display" 
      onclick="showPic(this); return false;">
Fireworks
</a>
 <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
```

####5.一个平稳退化的例子
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Example</title>
<script type="text/JavaScript">
window.onload = function() {
  if (!document.getElementsByTagName) return false;
  var lnks = document.getElementsByTagName("a");
  for (var i=0; i<lnks.length; i++) {
    if (lnks[i].getAttribute("class") == "popup") {
      lnks[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;
      }
    }
  }
}

function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=480");
}

</script>
</head>
<body>
//样式分离，并没有增加什么js代码
//<a href="http://www.example.com/" onclick="popUp(this.href);return false;">Example</a>
<a href="http://www.example.com/" class="popup">Example</a>
</body>
</html>

```

####6.图片库代码改进
```
//点击事件处理函数
function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  //判断title属性是否存在
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;//不让浏览器执行默认行为
}

//为连接增加点击事件，一个函数只有一个出口并集中在开头位置
function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  //预防性措施
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
      }
    //最好不使用，因为onclick也支持按键
   // links[i].onkeypress = links[i].onclick;
  }
}
//共享onload事件
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(prepareGallery);
```
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
    <script type="text/javascript" src="scripts/showPic.js"></script>
    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">
        <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
      </a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >
        <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
      </a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">
        <img src="images/thumbnail_rose.jpg" alt="Rose" />
      </a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">
        <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
      </a>
    </li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
  <p id="description">Choose an image.</p>
</body>
</html>

```

####7.动态创建标记
传统方法，没有做到样式和行为分离,不推荐
```
 <script type="text/javascript">
    document.write("<p>This is inserted.</p>");
  </script>
```
把一大段html放入文档中innerHTML
```
var testdiv = document.getElementById("testdiv");
  testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
```
#####dom方法
用到的这几个方法或者属性
parentNode 属性
lastChild 属性
appendChild 方法
insertBefore 方法
nextSibling 属性
```
window.onload = function() {
  var para = document.createElement("p");
  var txt1 = document.createTextNode("I inserted ");
  var emphasis = document.createElement("em");
  var txt2 = document.createTextNode("this");
  var txt3 = document.createTextNode(" content.");
  para.appendChild(txt1);
  emphasis.appendChild(txt2);
  para.appendChild(emphasis);
  para.appendChild(txt3);
  var testdiv = document.getElementById("testdiv");
  testdiv.appendChild(para);
}
```
图片库代码，刚开始展示的文字和图片用js生成
#####注意插入之前gallery.parentNode.insertBefore(placeholder,gallery);
#####没有insertAfter
```
function preparePlaceholder() {
  if (!document.createElement) return false;
  if (!document.createTextNode) 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 desctext = document.createTextNode("Choose an image");
  description.appendChild(desctext);
  var gallery = document.getElementById("imagegallery");
  gallery.parentNode.insertBefore(placeholder,gallery);
  gallery.parentNode.insertBefore(description,gallery);
}
```
自己实现一个insertAfter
 ```
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}
```
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • DOM编程之API总结篇
    原文 链接 关注公众号获取更多资讯 一、基本类型介绍 1.1 Node类型 DOM1级定义了一个Node接口，该接...
    前端进阶之旅阅读 3,967评论 7赞 34
  • Dom 核心编程-8.21
    复习 document对象提供了哪五种访问DOM元素的方法？ history、location对象分别有哪些常用方...
    轻思维阅读 671评论 0赞 3
  • JavaScript DOM编程艺术
    前言 归根结底，代码都是思想和概念的体现。没人能把一种程序设计语言的所有语法和关键字都记住，可以查阅参考书来解决。...
    朱细细阅读 2,979评论 4赞 14
  • 8月13被土匪抢劫
    最近怀旧比较多，想起深圳，想起进的玩具厂，路边买一个批量处理的收录机，全场30，有个白色的，特别好看，立体声的，如...
    瞿桂林阅读 36评论 0赞 0
  • 把明天當做最後一天——DAY19
    有人和我說照顧植物可以培養自己的心性。會更加平和一點，耐心一點，細心一點。 這句話不是沒有道理。 養了植物以後會比...
    蘇步阅读 159评论 0赞 2