DOM节点基本方法和属性
1、DOM（Document Object Model）是由W3C规范
已接触标准组织：ECMA W3C
已经到DOM4了 ，dom.0是出现规范之前的方法
两大阵营：
支持：DOM浏览器（Chrome、Opera、Firefox、Safari）
不支持：IE（6.7.8、360、腾讯遨游等）
2、节点：node
（1）Tree
常用节点类型：
元素节点：head body 。。。。
属性节点：id maxlength
文本节点：文本内容
获取属性：
|
|
nodeType |
nodeName |
nodeValue |
|
元素 |
1 |
元素名 |
null |
|
属性 |
2 |
属性名 |
属性值 |
|
文本 |
3 |
#text |
文本内容 |
ById 获取的是元素
attr=text.attributes[0] 有个伪数组
Let text=title.firstChild;
<h1 id="text">文本</h1>
<script>
window.onload=function(){
//元素
let oText=document.getElementById("text");
console.log(oText.nodeName);//h1
console.log(oText.nodeType);//1
console.log(oText.nodeValue);//null
//获取属性
let attr=oText.attributes[0];
console.log(attr.nodeType);//2
console.log(attr.nodeName);//id
console.log(attr.nodeValue);//text
//获取文本
let tx=oText.firstChild;
console.log(tx.nodeType);//3
console.log(tx.nodeName);//#text
console.log(tx.nodeValue);//文本
};
</script>
（2） 获取节点方法：（document）
1、 document.getElementById
2、 document.getElementsByTagName 类型不是Array是集合 使用for of 遍历
3、document.getElementsByName 节点里添加name属性和属性值 获取多个
4、document.getElementsByClassName ps：有兼容问题
不考虑ie678的情况下
5、querySelector(“”) 传入选择器 只能找到子元素的第一个
（推荐）6、querySelectorAll 可获取所有子元素
“div p[name=elementP]” 属性选择
（3）遍历节点：利用父与子，兄弟关系 （父节点.）
遍历节点属性：
firstChild 第一个节点
lastChild 最后一个节点
nextSibling 下一个兄弟
previousSibling 上一个兄弟节点
parentNode 父节点
childNodes 所有子节点
Ps：注意换行有#text！！！
（4）创建节点（方法） （document.）
createElement 创建元素
createAttribute 创建属性
createTextNode 创建文本节点
（5）增加节点（父节点.）
appendChild 往节点的最后添加
添加属性：.属性
不同，className=“color”；
insertBefore 往节点的前面添加 （新的，已经存在的） 父.insertBefore（p，d2.firstchild）
（6）修改节点（父节点.）
replaceChild （新的节点，旧的节点） 父.replaceChild （新的，要替换的）
（7）删除节点（父节点.）
removeChild
简化添加步骤：
innerHTML
innerText
注意：不是dom标准，但是浏览器都兼容，IE
innerHTML:标签不会被解析
特点1、返回一个字符串；
特点2、可以直接添加字符串
tr.innerHTML=“<P>增加段落</P>”+tr.innerHTML;
tr.innerHTML+="<P>增加段落</P>";
innerText:获取浏览器源码的时候，可以使用
multiple属性
option selected 获取选中状态
