js实现点小图看大图效果的思路及示例代码_javascript技巧

DOM：就是用Javascript操作HTML节点。

知识点：

将HTML变成DOM树

看到HTML会画DOM树。

创建节点，添加节点，删除节点

varnodeObj = document.createElement(“节点名”); //创建元素节点

document.createTextNode(“文本”); //创建文本节点

父节点.appendChild(子节点); //把子节点添加到父节点下

父节点.removeChild(子节点);

//获得节点

document.getElementById(“id号”);

document.getElementsByTagName(“html的标签名”)[0];

父节点.getElementsByTagName(“html的标签名”)[0];

//获得子元素的节点

父节点.childNodes

父节点.firstChild

父节点.lastChild

//节点的属性

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

nodeName 元素节点使用，返回标签名的大写字符串

nodeValue 文本节点使用，返回或设置文本

//获得兄弟节点

当前节点.nextSiblings

设置节点的属性

节点.setAttribute(属性名,值);

节点.getAttribute(属性名);

p.setAttrubute(“style”,”color:red;font-size:20px;”);

//一般做法，可以设置或获取

节点.属性名

设置文本

文本节点.nodeValue=文本;

案例：点击小图看大图

代码如下:

• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


•