dom笔记

作者: 一包 | 来源:发表于2018-05-03 21:48 被阅读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
    

    firstChild和lastChild属性

    相关文章

      网友评论

          本文标题:dom笔记

          本文链接:https://www.haomeiwen.com/subject/fpzlrftx.html