A.DOM操作分为
DOM Core,
HTML-DOM和
CSS-DOM三个方面。
B.在HTML-DOM中查找节点的标准方法是
getElement系列方法,也可以使用
parentNode,
firstChild,lastChild,nextSibling,previousSibling按层次关系查找节点,为避免浏览器兼容性,也使用
firstElementChild,lastElementChild,nextElementSibling,prevousElementSibling按层次关系查找节点。
alert(document.getElementById("news").lastChild.innerHTML)//返回子节点li标签最后一个
alert(document.getElementById("news").firstChild.innerHTML)//返回子节点li标签里面包括的所有内容
alert(document.getElementById("news").parentNode.innerHTML)//返回父节点里面包括的所有内容
alert(document.getElementById("11").nextSibling.innerHTML)//返回下一个节点
alert(document.getElementById("12").previousSibling.innerHTML)//返回上一个节点
alert(document.getElementById("news").firstChild.firstChild.nodeName)//标签的名称节点名称
alert(document.getElementById("news").firstChild.innerHTML)//返回子节点li标签里面包括的所有内容
alert(document.getElementById("news").parentNode.innerHTML)//返回父节点里面包括的所有内容
alert(document.getElementById("11").nextSibling.innerHTML)//返回下一个节点
alert(document.getElementById("12").previousSibling.innerHTML)//返回上一个节点
alert(document.getElementById("news").firstChild.firstChild.nodeName)//标签的名称节点名称
alert(document.getElementById("news").firstChild.firstChild.nodeType)//标签的元素1节点类型
alert(document.getElementById("11").innerText);
alert(document.getElementById("11").innerText);
C.
在Core DOM中访问和设置节点属性值的标准方法是getAttribute()和setAttribute()。
img.setAttribute("src","images/e.jpg"); img.setAttribute("alt","我和狗狗一起活下来"); img.nextSibling.innerHTML(我和狗狗一起活下来);
D.创建和增加节点的方法是
insertBefore(),appendChild(),createElement()和cloneNode,删除和替换节点的方法是removeChild()和replaceChild()。
//删除的方法 function hehe() { var info=document.getElementById("f"); info.parentNode.removeChild(info); } //替换 function th() { var info=document.getElementById("f1"); var infos=document.createElement("img"); infos.setAttribute("src","images/ee.png"); info.parentNode.replaceChild(infos ,info); } //增加 function zeng() { var info=document.getElementsByTagName("div")[0]; var infos=document.createElement("img"); infos.setAttribute("src","images/ee.png"); info.appendChild(infos); }
E.使用JavaScript改变样式的两种方法是使用style属性和className属性。
document.getElementById("cartList").style.display="none";
function over(){
document.getElementById("cart").style.backgroundColor="#ffffff";
document.getElementById("cart").style.zIndex="100";
document.getElementById("cart").style.borderBottom="none";
document.getElementById("cartList").style.display="block";
document.getElementById("cartList").style.position="relative";
document.getElementById("cartList").style.top="-1px";
}
function out(){
document.getElementById("cart").style.backgroundColor="#f9f9f9";
document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
document.getElementById("cartList").style.display="none";
}
F.使用style对象获取内联样式属性表,使用
currentStyle对象在IE浏览器中获取样式中的属性值,DOM提供了
getComputedStyle()方法以获取样式中的属性值。
G.制作随鼠标
滚动的广告图片。