码迷,mamicode.com
首页 > Web开发 > 详细

JS-DOM节点属性

时间:2020-02-27 09:16:16      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:对象   named   tab   strong   getname   stc   list   head   lis   

DOM属性

元素对象属性:

nodeType 节点类型

nodeName 节点名称

nodeValue 节点值

常用节点属性

 nodeTypenodeNamenodeValue
document/文档 9 #
Element/元素 1 元素标签的名字 null
attrbute/属性 2 属性名称 属性的值
Text/文本 3 #text 文本的值
注释节点 8 #comment 注释内容

元素节点是没有nodeValue,里边内容属于文本对象

//例子如下
//<body>
//    <div id="one" class="one" style="color:red">test</div>
//</body>

//获取常用节点
//文档对象

    console.log(document.nodeType+"    "+document.nodeName+"   "+document.nodeValue);

//元素对象

    let divObj = document.getElementsByTagName("div")[0];
    //获取元素对象,以div为例

    console.log(divObj.nodeType+"    "+divObj.nodeName+"   "+divObj.nodeValue);

//属性对象

   let attrs =   divObj.attributes;
    //获得该元素的属性节点集合(返回元素的属性的 NamedNodeMap)

    console.log(attrs);
    //显示属性类容

    //取出该集合中的某个属性对象(对象)
    //1.可以通过下标来获取
    let idObj = attrs[0];
    //2.NamedNodeMap提供的方法
        let idObj = attrs.getNamedItem("id");
        //通过名称
        let idObj = attrs.item(0);
        //通过下标

    console.log(idObj.nodeType+"    "+idObj.nodeName+"   "+idObj.nodeValue);

    idObj.nodeValue="new_one";
    //可以通过属性对象的nodevalue来设置属性的值

    console.log(divObj.id);
    divObj.id="show_one";
    //通过nodeValue来获取和设置属性的值比较麻烦。
    //所以我们都是通过 点 操作符来 获取和设置 属性的值(前提是元素节点必须有该属性)
    
    divObj.className="test_class";
    console.log(divObj.className);
    //使用classs属性时注意: 是  .classsName 
    //divObj.class="test_class"; 不能修改  必须使用 className

 

查询对象除了通过documen的六种方法找寻外

还可以通过元素之间的关系找寻

  1. 父节点/parentNode

  2. 子节点/chlidNode

    第一个子节点/fristChild

    最后一个子节点/lastChild

  3. 兄弟节点

    下一个兄弟/nextSibiling

    上一个兄弟/previousSibiling

JS-DOM节点属性

标签:对象   named   tab   strong   getname   stc   list   head   lis   

原文地址:https://www.cnblogs.com/-Archenemy-/p/12370118.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!