元素对象属性：
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
常用节点属性
| nodeType | nodeName | nodeValue | |
|---|---|---|---|
| document/文档 | 9 | # | 无 |
| Element/元素 | 1 | 元素标签的名字 | null |
| attrbute/属性 | 2 | 属性名称 | 属性的值 |
| Text/文本 | 3 | #text | 文本的值 |
| 注释节点 | 8 | #comment | 注释内容 |
//例子如下 //<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