获取HTML属性值,首先找到元素节点,然后才可以获取该属性的值。
var oBtn = document.getElementById("btn");
oBtn.id;
...
<input id="btn" class="myBtn" type="button" value="acquire"/>
oBtn.id表示获取id属性值,获取type属性可以写成oBtn.type。如果想要获取class属性,则需要写成:oBtn.className。
设置HTML的值:
obj.attr = "值";
obj是元素名,它是一个DOM对象,attr是属性名。
HTML属性操作(对象方法)
getAttribute():获取元素某个属性的值。
obj。getAttribute("attr");
注意:obj.attr(对象属性方式)无法获取自定义属性值,只能用getAttribute(对象方法方式)实现。
setAttirbute():设置元素某个属性值。
obj.setAttribute("attr","值");
setAttribute()方法有两个参数:第一个参数是属性名,第二个参数是要设置的属性值。对于自定义属性的值的设置,也只能用setAttribute()方法来实现。
removeAttribute():删除元素某个属性。
obj.removeAttribute("attr");
hasAttribute():判断元素是否含有某个属性,返回一个布尔值,如果包含该属性则返回true,反之则返回false。
CSS属性操作:
获取CSS属性的值:
getComputerdStyle(obj).attr;
getComputerdStyle(obj)["attr"];
设置CSS属性值:
obj.style.attr = "值";
obj.style["值"];
cssText属性:在JavaScript中可以使用cssText属性来同时设置多个CSS属性值。
obj.style.cssText = "值";
例:
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";
DOM遍历:
对于DOM遍历,可分为三种情况:查找父元素、查找子元素、查找兄弟元素。
查找父元素:
obj.parentNode;
查找子元素:在JavaScript中可以使用以下方法来获得父元素中的所有子元素或某个子元素:
childNodes,firstChild,lastChild;
children,firstElementChild,lastElementChild;