js的DOM操作

一 前言

js中的DOM指的是“Document Object Model”，也就是文档对象模型的意思，是HTML和XML文档的编程接口；它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

二 什么是DOM

任意的文档都可以绘制成树状结构，在DOM树上，每个元素都可与看做一个对象，每个对象都叫做一个节点(node)。

docunment就是一个对象，这个对象指代的是这个文档

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

三 DOM元素方法列表

四 认识JavaScript中的DOM接口：

(常用方法)
获取节点：
document.getElementById(idName) //通过id号来获取元素，返回一个元素对象
document.getElementsByName(name) //通过name属性获取id号，返回元素对象数组
document.getElementsByClassName(className) //通过class来获取元素，返回元素对象数组（ie8以上才有
document.getElementsByTagName(tagName) //通过标签名获取元素，返回元素对象数组
document.qurySelectorAll('选择器') // 通过选择器获取一组元素
document.querySelector("选择器") // 通过选择器获取单个元素

获取/设置元素的属性值：
element.getAttribute(attributeName) //括号传入属性名，返回对应属性的属性值
element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值

创建节点Node：
document.createElement("h3") //创建一个html元素，这里以创建h3元素为例
document.createTextNode(String) //创建一个文本节点
document.createDocumentFragment() //创建一个DOM片段

添加、移除、替换、插入（父元素调用）
element.appendChild() //添加
element.removeChild() //移除
element.replaceChild() //替换
element.insertBefore() //插入

(常用属性)
获取当前元素的父节点 ：
element.parentNode //返回当前元素的父节点对象

获取当前元素的子节点：
element.chlidren //返回当前元素所有子元素节点对象，只返回HTML节点
element.chilidNodes //返回当前元素所有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.firstChild //返回当前元素的第一个子节点对象
element.lastChild //返回当前元素的最后一个子节点对象

获取当前元素的同级元素：
element.nextElementSibling //返回当前元素的下一个同级元素 没有就返回null
element.previousElementSibling //返回当前元素上一个同级元素 没有就返回null

获取当前元素的文本：
element.innerHTML //返回元素的所有文本，包括html代码
element.innerText //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码

获取当前节点的节点类型：
node.nodeType //返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点

设置样式：
element.style.color=“#eea” //设置元素的样式时使用style，这里以设置文字颜色为例

总结：
大家都会觉得用jQuery来操作dom会更加的方便且好用，因为jq对js的dom进行了封装，使得我们Write Less, Do More。但是我觉得还是要总结一下原生js的dom，从根本上了解js对dom的操作，只会有利而无害。

五 查找DOM节点

1.通过id获取

     <div id="set"></div>
		<script>
		    let setObj = document.getElementById("set");
			console.log(setObj)
		</script>

注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

2.通过class获取

        <div class="box"></div>
		<div class="box"></div>
		<script>
		    var boxObj= document.getElementsByClassName("box");
			console.log(boxObj)
			//该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，
			//然后再为元素绑定事件。
		</script>

3.通过标签名获取

       <div>
		    <p>段落1</p>
		    <p>段落2</p>
		    <p>段落3</p>
		    <p>段落4</p>
		    <p>段落5</p>
		    <p>段落6</p>
		</div>
		<script>
		    var p = document.getElementsByTagName("p");
			console.log(p)
			//注意: 该方法返回的也是一个集合。
		</script>

4. 通过name属性获取

<form>
			<input type="text" name="get" id="" value="" />
		</form>
		<script type="text/javascript">
			var get = document.getElementsByName("get")
			console.log(get)
			//注意：只有含有name属性的元素(表单元素)才能通过name属性获取
		</script>

5.通过querySelector获取

<div id="ret"></div>
		<script>
		    var ret = document.querySelector("#ret");
			console.log(ret)
		</script>

注意：querySelector()方法括号中的值是元素的选择器，所以前面加了”#”符号，使用的是id选择器。此方法直接返回DOM对象本身。

6. 通过querySelectorAll获取

<div id="ret"></div>
		<div id="ret"></div>
		<div id="ret"></div>
		<div id="ret"></div>
		<div id="ret"></div>
		<div id="ret"></div>
		<script>
		    var ret = document.querySelectorAll("#ret");
			console.log(ret)
		</script>

两个方法使用差不多的语法，都是接受一个字符串参数，该参数需要是合法的CSS选择语法。querySelector()方法仅仅返回匹配指定选择器的第一个元素，如果需要返回所有的元素，使用querySelectorAll()方法替代。

六 获取元素内容

<ul>
			<li>段落1</li>
			<li>段落2</li>
			<li>段落3</li>
			<li>段落4</li>
			<li>段落5</li>
		</ul>
		<script>
		    var ret = document.querySelectorAll("li");
			for(var i=0; i<ret.length;i++){
				console.log(ret[i].innerHTML)
			}
		</script>

七 修改设置元素的内容

<ul>
			<li>段落1</li>
			<li>段落2</li>
			<li>段落3</li>
			<li>段落4</li>
			<li>段落5</li>
		</ul>
		<script>
		    var ret = document.querySelectorAll("li");
			for(var i=0; i<ret.length;i++){
				ret[0].innerHTML="改变后的段落1"
				ret[1].innerHTML="改变后的段落2"
				ret[2].innerHTML="改变后的段落3"
				ret[3].innerHTML="改变后的段落4"
				ret[4].innerHTML="改变后的段落5"
				console.log(ret[i].innerHTML)
			}
		</script>

八 获取元素的行内样式

<div id="box" style="height: 50px; margin-left: 100px;">
			今天是星期二
		</div>
		<script>
			var box = document.getElementById("box")
			console.log(box.style.height)
			console.log(box.style.marginLeft)
		</script>

九 设置元素的行内样式

<div id="box">
			今天是星期二
		</div>
		<script>
			var box = document.getElementById("box")
			box.style.backgroundColor="greenyellow"
			box.style.width="100px"
			box.style.color="white"
		</script>

十设置元素的类名

<div id="city"></div>
		<script>
			var city = document.querySelector("#city")
			city.classList.add("show") //show
			// city.className="box" //box
		</script>

写到最后