DOM基础操作(2) | 青训营

45 阅读1分钟

获取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;