––––获取对应的节点对象–––––––––––––––––––––––
1. getElementById('id') 通过 id 获取 元素节点对象
2. getElementsByClassName('类名') 结果是数组, 节点对象是数组中的元素
3. getElementsByTagNname('标签'); 结果是数组
4. getElementsByName('name名'); 结果数组
5. querySelector('选择器'); 第一个节点对象
6. querySelectorAll('选择器'); 结果是数组
DOM中有很多不同类型的节点
常用的三种节点: 元素节点, 文本节点, 属性节点
Node 类型: js中的所有节点类型都继承自Node类型
childNodes属性
nodeType属性
+ nodeType == 1 元素节点
+ nodeType == 2 属性节点
+ nodeType == 3 文本节点
nodeValue属性(注意点: 获取时不包括文本, 可以设置改变)
firstChild和lastChild属性
通配符 *
获取文档中所有节点
var nodeArr = document.getElementsByTagName('*');
children获取的是元素节点; 结果是数组
console.log(div.children);
元素节点
nodeName 节点名称
alert(div.nodeName);
alert(div.nodeType); //1表示元素节点
alert(div.nodeValue); //元素节点 nodeValue = null
获取当前节点的所有子节点(元素节点 属性节点 文本节点)
空格也当做文本节点
注意点: childNodes没有包含 属性节点
//标签节点插入内容(会覆盖以前的内容)
通过创建新元素和修改现有元素来改变网页结构
document.write()
innerHTML()
innerText()
createElement() 创建元素节点
appendChild() 在父元素中插入子元素,在尾部进行插入
createTextNode() 创建文本节点
insert Before() 在父元素中插入子元素,在头部进行插入
语法: parentElement.insertBefore(newElement, targetElement)
// createElement('');创建元素节点
