DOM-------2

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/60966448

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);
相关文章
|
11月前
|
小程序 JavaScript
小程序----数据绑定
小程序----数据绑定
|
11月前
|
小程序 JavaScript
小程序----事件绑定
小程序----事件绑定
|
JavaScript 前端开发
DOM ------ 获取元素
DOM ------ 获取元素
|
JavaScript 前端开发
DOM ------ 事件 的那些事儿
DOM ------ 事件 的那些事儿
|
JavaScript
DOM ------ 节点
DOM ------ 节点
|
移动开发 JavaScript
DOM ------ H5自定义属性
DOM ------ H5自定义属性
|
JavaScript
DOM ------ 操作元素
DOM ------ 操作元素
|
JavaScript
DOM ------ 常见鼠标事件
DOM ------ 常见鼠标事件
|
JavaScript
DOM ------ 下拉菜单
DOM ------ 下拉菜单
|
JavaScript
DOM ------ 创建节点
DOM ------ 创建节点

热门文章

最新文章