JS DOM编程艺术 学习笔记

getElementById()

返回一个与那个有着给定Id属性值的元素节点相对应的对象。
document.getElementById(id)
例子：document.getElementById(“purchases”)

getElementByTagName()

返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
element.getElementByTagName(tag)
例子：document.getElementByTagName(“li”)

getAttribute()

查询属性的值。
object.getAttribute(attribute)
不能通过document对象调用

setAttribute()

修改属性的值。
object.setAttribute(attribute,value)
例子：shopping.setAttribute(“title”,“a list of”);

childNodes属性

从给定文档的节点树里把任何一个元素的所有子元素检索出来。
返回一个数组，包含给定元素节点的全部子元素：
element.childNodes

function countBodyChildren() {
  var body_element=document.getElementsByTagName("body")[0];
  alert (body_element.childNodes.length);

}

nodeType属性

node.nodeType
元素节点 1
属性节点 2
文本节点 3

nodeValue属性

改变某个文本节点的值。
node.nodeValue

<p id="description">Choose an image.</p>
alert(description.childNodes[0].nodeValue);

firstChild和lastChild属性

childNodes[0]=firstChild
上面的代码可写成
alert(description.firstChild.nodeValue);

用JS代码改变p元素的文本内容

function(whichpic){
 var text=whichpic.getAttribute("title");/*提取title的值*/
  var description = document.getElementById("description");/*找到id为description的p元素*/
  description.firstChild.nodeValue=text; /*把description对象的第一个子节点的nodeValue属性值设置为变量text的值*/
}

事件处理函数

event=“JavaScript statement(s)”
事件处理函数可以将JS与HTML联系起来。
例如：
οnclick=“showPic(this)”
如果返回true,onclik事件处理函数认为“这个链接被点击了”
如果返回false,onclik事件处理函数认为“这个链接没有被点击”

<a href="image/bgg.jpg" onclick="showPic(this);return false;" title="A fireworks display">
      Fireworks
    </a>

open()

window.open(url,name,features)
url：想在新窗口里打开的那份文档的URL地址

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

预留退路

javascript：伪协议

协议：在因特网上的两台计算机之间传输各种数据包的标准化通信机制，如http://、ftp://等。
伪协议：对非标准化通信机制的统称。（不推荐）
<a href="javascript:popUp(‘http://www.example.com/’);>Example

退路

让禁用了JS的网站仍然可以访问网页。
方法：

<a href="http://www.example.com/" onclick="popUp(http://www.example.com/ ）;return false;”>Example</a>

可以简化成：

<a href="http://www.example.com/" onclick="popUp(this.getAttribute('href')）;return false;”>Example</a>

还可以更简单：

<a href="http://www.example.com/" onclick="popUp(this.href）;return false;”>Example</a>

分离JavaScript

把一个事件添加到某个特定Id属性元素上
getElementById(id).event=action

如果涉及多个函数，步骤如下：

window.onload=prepareLinks;/*让代码在HTML全部加载到浏览器后才开始执行*/
function prepareLinks() {
  var links=document.getElementsByTagName("a");/*把文档里所有链接放入一个数组*/
  for(var i=0;i<links.length;i++){/*遍历数组*/
    if(links[i].getAttribute("class")=="popUp"){/*如果相等，就调用*/
      links.onclick=function () {
        popUp(this.getAttribute("href"));
        return false;
        
      }
      

向后兼容性

对象检测

window.onload=
function() {
if（!document.getElementByTagName）return false;
  var links=document.getElementsByTagName("a");/*把文档里所有链接放入一个数组*/
。。。。。。。        
      }
      

动态创建HTML内容：document.write()和innerHTML

两者都是老方法，了解即可。

createElement()

1、创建一个新元素
2、把这个新元素插入节点树
var para=document.createElement(“p”);

appendChild()

把新建的节点插入文档的节点树

    var para= document.createElement("p");
    var testdiv= document.getElementById("testdiv");
    testdiv.appendChild(para);

createTextNode()

createElement()创建的是一个空白的p元素，现在需要把文本放入p。
createTextNode()创建文本节点。

  window.onload = function () {
    var para= document.createElement("p");
    var testdiv= document.getElementById("testdiv");
    testdiv.appendChild(para);
    var text= document.createTextNode("Hello world");
    para.appendChild(text);
  }

insertBefore()

parentElement(父元素).insertBefore(newElement,targetElement(插入到哪个现有元素的前面));

父元素可以用parentNode获得，例如
gallery.parentNode.insertBefore(description,gallery);

注意：没有现成的insertAfter函数
下面是编写的insertAfter()

function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastchild==targetElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement,targetElement.nextSibling);//把新元素插入目标元素和parent下一个子元素中间。目标元素后面的下一个兄弟节点是目标元素的nextSibling属性
}
}

addLoadEvent()

用这个函数来把函数绑定在onload事件处理函数上。

function addLoadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload!=='function'){
    window.onload=func;
  }
  else{
    window.onload=function () {
      oldonload();
      func();
    }
  }
}//这是定义函数

addLoadEvent(preparePlaceholder);//使用函数

className属性

className是一个可读可写的属性，凡是元素节点都有这个属性。
用className属性和赋值操作符设置某个给定元素的class属性：
element.className=value;