dom笔记
2018-05-03 本文已影响0人
一包
节点
每一个节点都是一个对象；
- 元素节点（标签如<body>)
- 属性节点（所有的属性都被元素包含，如<p>中的title="A picture"）
- 文本节点（文本）
获取元素
获取的都是对象，因为文档中每一个元素都是对象；
- getElementById
-
getElementsByTagName
返回一个对象数组，允许把一个通配符作为它的参数，如:
alert(document.getElementsByTagName("*").length)
//可知道某份文档里共有多少个元素节点
-
getElementsByClassName
返回一个对象数组,使用这个方法还可以查找那些带有多个类名的元素，只需在字符串参数中用空格分隔类名即可。如：
alert(document.getElementsByClassName("important sale").length)
注意：即使在元素的class属性中，类名的顺序是"sale important"，也会照样匹配该元素。不仅类名的实际顺序并不重要，就算元素还带有更多类名也没关系。
获取和设置属性
- getAttribute
var paras=document.getElementByTagName("p")
for(var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("title"));
}
以上如果没有title属性，则getAttribute("title")方法会返回null值；
getAttribute方法不属于document对象，所以不能通过docume对象调用，只能通过元素节点对象调用。
-
setAttribute
和getAttribute一样，只能用于元素节点；
xx.setAttribute("title","a list of goods")
childNodes属性
在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组；
var body_element=document.getElementByTagName('body')[0];
alert(body_element.childNodes.length);
nodeType属性
每一个节点都有nodeType属性。
node.nodeType
nodeType的值是一个数字
- 元素节点的nodeType属性值是1
- 属性节点的属性值是2
- 文本节点的属性值是3
nodeValue属性
使用 nodeValue属性可以改变一个文本节点的值
如：<p id="description">A tree</p>
var desription=document.getElementById("description");
alert(description.nodevalue);
//null,因为p元素本身的nodeVlue值是一个空值，我们真正需要的是<p>所包含的文本的值
alert(description.childNodes[0].nodeValue);//A tree
