5.DOM - 《javascript教程》

DOM节点类型-nodeType
DOM节点名-nodeName
DOM节点值-nodeValue

DOM定义
中文意思是文档对象模型定义是对文档节点提供的API接口

DOM节点
**
查找

 //JavaScript选择器 class id 当前元素都可以使用 
 document.querySelector 
 //选中多个元素
 document.querySelectorAll
 //选中元素标签
 document.getElementsByTagName
 //选中input元素name
 document.getElementsByName
 //选中元素id
 document.getElementById
//兄弟前一个节点
el.previousSibling => 得到当前元素的前一个节点元素 
//兄弟后一个节点
el.nextSibling => 得到当前元素后一个元素节点
//返回所有子节点，即NodeList对象
var parent = document.querySelector("#parent");
var children = parent.childNodes;
//父节点-parentNode 返回父节点，如果document 对象调用则返回 null
 var title = document.querySelector("#title");
 title.parentNode.style.color = "red";

创建

document.createElement

删除

//删除当前元素
document.remove

//删除子元素 el->选中子元素
document.removeChild(el)

插入

//parent父元素  newEel要插入的元素  el作为参照物的元素
(parent).insertBefore(newEl,el) 

//parent父元素 newEl要插入的元素 这种方式只能添加到子元素最后面位置
(parent).append(newEl) 

//和2用法一样 append支持插入多个参数，且支持字符串
(parent).appendChild(newEl)

内容

//innerHTML 属性以字符串形式返回这个元素的内容。 也可以用来替换元素当前内容
parent.innerHTML = "<h1>hello</h1>";

//outerHTML 属性以字符串形式返回这个元素及内容。 也可以用来替换元素当前内容
parent.outerHTML = "<h1>word</h1>"; 

//查询或替换纯文本元素内容的标准方法是用Node的textContent属性来实现。
//在IE中，可以用Element的innerText属性来代替
var title = document.querySelector("#title");
title.textContent = "hello word";

替换

// parent父元素 newEl需要插入的元素  el需要被删除的元素
（parent).replaceChild(newEl,el)

复制

//el被克隆的元素  isTrue为true 包含子元素  false或不写只克隆最外层元素
el.cloneNode(isTrue)

DOM节点类型-nodeType

 1-代表Element节点
 3-代表Text节点
 8-代表Comment节点
 9-代表Document节点
 11-代表DocumentFragment节点

DOM节点名-nodeName

返回元素的标签名，以大写形式表示

  var title = document.querySelector("#title");
  console.log(title.nodeName);
  console.log(title.firstChild.nodeName);

DOM节点值-nodeValue

返回Text 节点或 Comment 节点的值

  var title = document.querySelector("#title");
  console.log(title.firstChild.nodeValue);

DOM属性（attribute）
dom属性即 dom标签上像class id 之外的自定义的属性这里统称为dom属性

el.setAttribute //设置属性
el.getAttribute //获取属性
el.removeAttribute//删除属性

//举个列子
var button = document.createElement('button')
//undefined
button.setAttribute('id','hello button')
//undefined
button.getAttribute("id")
//"hello button"
button.removeAttribute("id")
//undefined
button.getAttribute("id")
//null