国外b2b平台有哪些网站_网站建设制作找哪家公司_google关键词规划师_江门seo推广公司

第三章，JavaScript操作DOM对象

一，操作DOM

• DOM：Document Object Model（文档对象模型）

  

• 节点和节点的关系

  

• 访问节点

  • 使用getElement系列方法访问指定节点

    • getElementById()、getElementsByName()、getElementsByTagName()

  • 根据层次关系访问节点

    • 节点属性

    

    • element属性

    

  oNext = oParent.nextElementSibling || oParent.nextSibling   
  oPre = oParent.previousElementSibling || oParent.previousSibling  
  oFirst = oParent. firstElementChild  ||  oParent.firstChild   
  oLast = oParent.lastElementChild || oParent.lastChild 
  

二，操作节点

• 操作节点属性

  • getAttribute(“属性名”)
  • setAttribute(“属性名”,“属性值”)

• 创建和插入节点

  

• 删除和替换节点

  

var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);

• 操作节点样式

  • style属性

    • HTML元素.style.样式属性＝"值"

    

  document.getElementById("titles").style.color="#ff0000"; 
  document.getElementById("titles").style.fontSize="25px ";
  

  • className属性
    • HTML元素.className=“样式名称”

  function over(){document.getElementById("cart").className="cartOver";document.getElementById("cartList").className="cartListOver";}
  function out(){document.getElementById("cart").className="cartOut";document.getElementById("cartList").className="cartListOut";}

  • 获取元素的样式

  alert(document.getElementById("cartList").display);document.defaultView.getComputedStyle(元素,null).属性;var cartList=document.getElementById("cartList");
  alert(document.defaultView.getComputedStyle(cartList,null).display);HTML元素. currentStyle.样式属性;alert(document.getElementById("cartList").currentStyle.display);
  

  • HTML中的元素属性

  

​