2020-11-30 Dom基础 节点属性，查找元素的6种方法，获取或设置html内容，节点属性操作，节点遍历，元素遍历
节点属性
1、nodeName 节点名称
元素--- 标签名
属性--- 属性名
文本--- #text
文档--- #document
2、nodeValue
元素--- null 或 undefined
属性--- 属性值
文本--- 自身
3、nodeType
验证节点类型 nodeType
元素 1
属性 2
文本 3
注释 8
文档 9
<div id="x">啊啊</div>
呵呵
<!-- 这是注释 -->
var bodyDom= document.body.childNodes;
console.log(bodyDom);
console.log("div标签",bodyDom[1].nodeType); // 1
console.log("呵呵",bodyDom[2].nodeType); //3
console.log("注释",bodyDom[3].nodeType); //8
查找元素的6种方法
通过id获取
document.getElementById(id); // 一个，获取到 对象，获取不到 null
通过class 获取
document.getElementsByClassName(class);// 多个，获取到 伪数组，获取不到 空数组[]
同过标签名 TagName获取
document.getElementsByTagName(标签名);//多个，获取到 伪数组，获取不到 空数组[]
通过name 属性获取
document.getElementsByName(name属性);//多个，获取到 伪数组，获取不到 空数组[]
通过 css 选择器获取 一个
document.querySelector(css选择器);//一个，获取到 对象，获取不到 null
通过 css 选择器获取 多个
document.querySelectorAll(css选择器);//多个，获取到 伪数组，获取不到 空数组[]
获取或设置html 内容
innerHtml 设置或获取 位于对象起始 和结束标签内的html
<div id="one">
欢迎
<h1>访问</h1>
</div>
document.getElementById("one").innerHtml // 欢迎 访问
innerText 设置或获取 位于对象起始 和结束标签内的 文本
<div id="one">
欢迎
<h1>访问</h1>
</div>
document.getElementById("one").innerText // 欢迎 访问
outerHtml 设置或获取 对象 及其内容的html
<div id="one">
欢迎
<h1>访问</h1>
</div>
document.getElementById("one").outerHtml // 欢迎 访问
outerText 设置或获取 对象 文本
<div id="one">
欢迎
<h1>访问</h1>
</div>
document.getElementById("one").outerText // 欢迎 访问
节点属性操作
attributes 获取所有属性
节点对象.attributes
<div id="one" class="two" title="x" style="">1</div>
var oneDom= document.querySelector("#one");
console.log("节点属性 ",oneDom.attributes );// id class title style 组成的伪数组
获取属性值
1、节点对象.属性名 缺点：不能获取 自定义属性，class 写成 className
<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.id //one
oneDom.className //two
oneDom.xxx // undefined
2、节点对象.getAttribute(属性名);
<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.getAttribute("class");//two
oneDom.getAttribute("xxx");//222
设置属性值
1、节点对象.属性名 = 新的属性值 缺点：不能设置 自定义属性，class 写成 className
<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.id ="x"//one
oneDom.className="x" //two
oneDom.xxx // undefined
2、节点对象.setAttribute(属性名,新的属性值);
<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.setAttribute("class","y");
oneDom.setAttribute("xxx","y");
删除属性值
节点对象.removeAttribute(属性名);
<div id="one" class="two" title="x" xxx="222">1</div>
var oneDom= document.querySelector("#one");
oneDom.removeAttribute("class");
oneDom.removeAttribute("xxx");
获取/设置行内 style属性
节点对象.style.属性名【color、width、height、fontSize】 = 值【"red"、"100px"】
获取 非行内 样式
ie
节点对象.currentStyle
非ie
getComputedStyle(节点对象,伪类).样式名
节点遍历(元素、文本、注释)
childNodes 子节点
firstChild 第一个子节点
lastChild 最后一个子节点
parentNode 父节点
previousSibling 上一个兄弟节点
nextSibling 下一个兄弟节点
ownerDocument 根节点
元素遍历 （标签）
children 子节点
firstElementChild 第一个子节点
lastElementChild 最后一个子节点
parentElement 父节点
previousElementSibling 上一个兄弟节点
nextElementSibling 下一个兄弟节点