JS-DOM节点属性

Posted 2021-03-07 是非_大道克己

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-DOM节点属性相关的知识，希望对你有一定的参考价值。

DOM属性

元素对象属性：

nodeType 节点类型

nodeName 节点名称

nodeValue 节点值

常用节点属性

	nodeType	nodeName	nodeValue
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的六种方法找寻外

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

父节点/parentNode
子节点/chlidNode

第一个子节点/fristChild

最后一个子节点/lastChild
兄弟节点

下一个兄弟/nextSibiling

上一个兄弟/previousSibiling

以上是关于JS-DOM节点属性的主要内容，如果未能解决你的问题，请参考以下文章

JS-Dom节点，父子节点

JS-DOM ～ 03. 子节点的操作style.样式和属性dom元素的创建方法及操作14个例题主要是利用js直接控制html属性