JS DOM概念及操作

八、DOM

8.1了解DOM

DOM:文档对象模型（Document Object Model)
DOM:是访问HTML和操作HTML的标准

Core DOM – 核心DOM：针对任何结构化文档的标准模型
XML DOM – 针对XML文档的标准模型
HTML DOM – 针对HTML文档的标准模型

8.2 DOM分类

1.文档节点
2.标签（元素）节点
3.属性节点
4.文本节点
5.注释节点

8.3DOM节点的层级关系（DOM树）

1.父节点（parent node) 父节点拥有任意数量的子节点
2.子节点（child node) 子节点只能拥有一个父节点
3.兄弟节点（sibling node) 拥有相同父节点的同级节点
4.根节点（root node)：一个HTML文档一般只有一个根节点，根节点没有父节点，是最上层的节点

5.祖先节点：包含子节点的节点都可以叫祖先节点，其中包括了父节点
6.后代节点：一个节点内包含的所有节点，叫做后代节点，其中包括了子节点

JS跟页面中这些标签进行交互
1.获取标签（元素）节点
修改标签CSS样式
修改标签属性
2.创建标签
3.删除标签
4.复制标签
5.插入标签

8.4元素节点

//根据元素ID获取元素节点
var jsDiv_id = document.getElementById("box")
//根据相同的className获取元素节点列表，不支持IE8以下
var jsDivs_class = document.getElementsByClassName('classDiv')
//根据元素name属性获取元素节点列表
var jsDivs_name = document.getElementsByName('inputText')
//根据标签名获取元素节点列表
var jsDivs_tag = document.getElementsByTagName('div')

8.5属性节点

var jsInput_id = document.getElementById("in") 
//方法1：获取官方定义的属性，直接使用元素节点.属性名
console.log(jsInput_id.placeholder)

function func1(){
	jsInput_id.placeholder='请输入密码';               //修改属性值
}
//方法2：元素节点.getAttribute(属性名),可获取非官方定义的属性
console.log(jsInput_id.getAttribute('my'))
function func2(){
	jsInput_id.setAttribute('my','xiaomiao')          //修改属性值
	console.log(jsInput_id)
}
function func3(){
	jsInput_id.removeAttribute('my')                  //删除属性（可删除官方定义的属性）
	console.log(jsInput_id)
}
function func4(){
	jsInput_id.my1 = 'xiaomiao';                      //增加属性，方法1（原属性存在时，则为修改）
	jsInput_id.setAttribute('my2','yingying');        //增加属性，方法2（原属性存在时，则为修改）
	console.log(jsInput_id) 
}

8.6文本节点

var jsDiv1 = document.getElementById('box1')
//获取文本节点，从对象开始标签到结束标签的全部内容，不包括本身HTML标签（包含换行）
console.log(jsDiv1.innerHTML)    
//获取文本节点，从对象开始标签到结束标签的全部内容，包括本身HTML标签（包含换行）
console.log(jsDiv1.outerHTML) 
//获取文本节点，只获取文本不包含换行
console.log(jsDiv1.innerText)     
  
jsDiv1.innerHTML = '<h2>I am a good man</h2>'          //替换文本

8.7行内样式表（写在元素标签内的样式）

var jsDiv2 = document.getElementById('box1');
function func5(){
	console.log(jsDiv2.style.backgroundColor)          //获取行内样式
	jsDiv2.style.backgroundColor = 'blue'              //修改行内样式
	jsDiv2.style['width'] = '500px'                    //修改行内样式,跟上面的代码功能相同
}

8.8样式表的读取（外部和内部样式表，行内的样式也可以获取）

var jsDiv3 = document.getElementById('box1');
var w1 = 0;
//判断是否为IE浏览器
if (jsDiv3.currentStyle){
	//IE浏览器获取样式属性值的方式
	w1=jsDiv3.currentStyle.backgroundColor;
}else{
	//其它浏览器获取样式属性值的方式
	w1=window.getComputedStyle(jsDiv3,null).backgroundColor
}
console.log('w1=' + w1)

8.9获取节点属性

节点类型 nodeName nodeType nodeValue
元素节点 元素名称 1 null
属性节点 属性名称 2 属性值
文本节点 #text 3 文本内容，不包括html
注释节点 #comment 8 注释内容

console.log(jsDiv3.nodeName)    //获取nodeName(元素名称)
console.log(jsDiv3.nodeType)    //获取nodeType(1)
console.log(jsDiv3.nodeValue)   //获取nodeValue(null)

8.10节点层次关系属性

//节点层次关系属性
var jsDiv4 = document.getElementById('box');
var allChilds = jsDiv4.childNodes;             //获取所有子节点
var firstChild = jsDiv4.firstChild;            //获取第一个子节点
var lastChild = jsDiv4.lastChild;              //获取最后一个子节点
var rootNode = jsDiv4.ownerDocument;           //获取该节点的文档的根节点，相当于document
var parentNode = jsDiv4.parentNode;            //获取该节点的父节点
var previousNode = jsDiv4.previousSibling;     //获取该节点的前一个同级节点
var nextNode = jsDiv4.nextSibling;             //获取该节点的后一个同级节点
var attributesNode = jsDiv4.attributes;        //获取该节点的所有属性节点

8.11动态控制标签

var jsDiv5 = document.getElementById('box2');
var a = document.createElement('p');                   //创建节点
a.innerHTML = 'I am a good man';                       //设置文本
a.style.backgroundColor='red';                         //修改节点属性
console.log(a);
jsDiv5.append(a);                                      //在父节点的最后插入节点
jsDiv5.insertBefore(a,jsDiv5.lastChild.previousSibling);        //在同级节点前插入节点
jsDiv5.replaceChild(a,jsDiv5.lastChild.previousSibling);        //替换节点
var jsDiv5_1 = jsDiv5.cloneNode(true)                 //复制节点，true代表同时复制子节点
console.log(jsDiv5_1)
jsDiv5.removeChild(jsDiv5.firstChild.nextSibling)     //删除子节点