JS-DOM节点属性

2021-04-14 19:27

阅读:458

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

DOM属性

元素对象属性:

nodeType 节点类型

nodeName 节点名称

nodeValue 节点值

常用节点属性

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

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

//例子如下
//
//    
test
// //获取常用节点 //文档对象 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


评论


亲,登录后才可以留言!