DOM-------2

    xiaoxiao2021-03-25  121

    nodeName 获取节点的标签名 (和tagName等价)

    样式如下:

    <div id=”test”>这是<em>测试</em>这是一个测试</div>

    alert(data.nodeName); // div alert(data.tagName); // div

    nodeType 节点的类型值

    类型值元素节点1属性节点2文本节点3 alert("元素节点的类型:"+data.nodeType); // 1

    nodeValue 节点的内容

    对于以下样式,获取文本节点的内容时,需要注意的问题

    <div id=”test”>这是<em>测试</em>这是一个测试</div>

    文本位于属性节点内部的文本节点中,需要定位到文本节点再用nodeValue获取文本节点的值。或者定位到属性节点时用innerHTML获取属性节点内部的代码。

    alert(data.childNodes[1].childNodes[0].nodeValue); alert(data.childNodes[1].innerHTML);

    用innerHTML更改文本为<strong>文本</strong>时,会在页面中输出加粗的文本。但是用nodeValue更改后会输出”<strong>文本</strong>”

    文本节点没有标签名#text

    childNodes 当前元素所有子节点

    var data = document.getElementById("test"); for(var i = 0 ; i < data.childNodes.length; i++){ if(data.childNodes[i].nodeType == 1){ alert("这是一个属性节点:"+data.childNodes[i].nodeName); }else if(data.childNodes[i].nodeType == 3){ alert("这是一个文本节点:"+data.childNodes[i].nodeValue); } } // 这是一个文本节点:这是 // 这是一个属性节点:EM // 这是一个文本节点:这是一个测试

    firstChild 和 lastChild

    子节点的第一个节点和最后一个节点 first–> childNodes[0] last–> childNodes[child.length-1]

    ownerDocument返回根节点 (document节点)

    document对象

    parentNode父节点 previousSibling同级的上一个节点 nextSibling同级的下一个节点

    alert(data.lastChild.ownerDocument.nodeName); // #document alert(data.parentNode.innerHTML); // BODY alert(data.lastChild.previousSibling.nodeName); // EM alert(data.firstChild.lastSibling.nodeName); // EM

    attributes

    获取节点中的属性 attributes[“属性名”].nodeValue

    for(var i = 0 ; i < data.attributes.length; i++){ alert(data.attributes[i].nodeName+":"+data.attributes[i].nodeValue); } alert(data.attributes["id"].nodeValue);
    转载请注明原文地址: https://ju.6miu.com/read-15577.html

    最新回复(0)