dom笔记

节点

每一个节点都是一个对象;

  • 元素节点(标签如<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

firstChild和lastChild属性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容