《javascript Dom编程艺术》学习笔记

总结:
DOM方法

 创建元素节点 : createElement() ,搭配 appendChild()方法。 例如:var p = document.createElement("p");  document.body.appendChild(p);
 创建文本节点 : createTextNode() ,  例如: var text = document.createTextNode("Hello World!");
 复制节点:cloneNode();    例如:var para = document.createElement("P");  var newpara = para.cloneNode(false);   参数是布尔值,决定是否将子节点也复制。
 插入节点 : appendChild()
 删除节点 : removeChild()   例如:parent.removeChild(child);
 替换节点 : replaceChild()   例如:parent.replaceChild(newChild,oldChild);
 设置属性节点 : setAttribute()    例如:message.setAttribute("id","mess");
 查找节点 : getAttribute()           例如:var txt = message.getAttribute("title");

DOM属性

  nodeName  : 如果节点是属性节点,将返回这个属性的名字; 如果是文本节点,返回一个内容为#text的字符串
  nodeType   : 返回节点的类型,有12中取值。
  nodeValue  : 返回节点的当前值

遍历节点树

   childNodes  :  返回一个数组,由给定元素节点的子节点组成。例如:nodeList = node.childNodes ; node.childNodes.length;
   firstChild     :  返回给定元素节点的第一个子节点。 例如:node.firstChild  等价于  node.childNodes[0];
   lastChild        :     返回给定元素结点的最后一个子节点。
   nextSibling     :    返回给定结点的下一个兄弟节点。
   previousSibling  : 返回给定节点的上一个兄弟节点。
   parentNode    :   返回给定节点的父节点。  而且返回的永远是元素节点,因为只有元素节点才有可能包含子节点。

CSS-DOM
利用DOM读写css信息:
例如:element.style.color;
注意:
1. element.style.font-family是有问题的,javascript会把“-”理解为减号,解决办法是“Camel记号”,如:element.style.fontFamily.

  1. 有时,DOM对样式属性的检索结果和CSS设置值会采用不同的计量单位。例如:


    但是在某些浏览器里,alert(documentElementById(“example”).style.color);出来的结果是:rgb(153,153,153)

  2. 只有内嵌在HTML里的style属性,才能用DOM来查询。但是如果用DOM设置样式信息的话,当然也可以检索出来。

你可能感兴趣的:(JavaScript)