基础DOM操作

DOM（文档对象模型）

DOM描绘了一个层次化的节点数，允许开发人员进行添加、移除和修改页面元素（元素的文字也是dom中了一个节点）。

javascript获取元素

普通元素获取

<div class="ob" id="ob" ></div>
<div class="ob" id="ob"></div>
<input type="input" name="run" value=""/>
var ob = document.getElementById("ob");//只会获取到第一个id叫做ob的元素，找不到则返回null，因为一个元素是一个对象的存在，当没赋值的时候是个null值
var ob = doucment.getElementsByClassName("ob");//返回的是个数组（至于类数组的概念后续进行描述），如果是获取第一个class元素，则使用ob[0]
var ob = document.getElementsByTagName("div");//通过标签进行获取
var ob = document.getElementByName("run");//一般用在表单的获取
/*以上都不太常用，除了通过id获取元素*/
<div class="nav">
	<div class="header">
 		<ul>
 			<li></li>
 			<li></li>
 			<li></li>
 		</ul>
 	</div>
</div>
<div class="footer">
	<div class="header"></div>
</div>
//以上两者header肯定是不同的,所以通过className获取会很不方便,不容易后期的维护，因此引入了
var header = document.querySelect(".nav>.header");//类似于css的获取，类似于id获取，如果同样的结构的话，获取到的是第一个元素
var li = doucment.querySelectAll(".nav>header>ul>li");//返回的是数组，获取到所有的元素

特殊元素获取

document.documentElement //获取整个结构文档，html架构
document.body  //获取body元素
document.title //获取title
document.head  //获取head 

元素的自有属性

元素的自有属性可以通过console.dir来进行查看
className 类名
innerText 元素内部的文字内容，因此如果是在其中加入例如span便签，也会如实的进行打印，并不会解析成html结构
innerHTML 可以进行解析标签，同时提醒的一点是换行符，空格也是结构
获取元素的src

<img src="image/1.png" alt="" title=""/>
var img = document.getElementByTagName("img");
img.src;  //获取到的是图片地址的绝对路径:file://...
img.src="image/2.png";//设置src的时候却会如实的反应所书写的代码

同样的属性在不同的标签获取到的值可能不同，这是浏览器内核导致的原因，例如

<div name="run"></div>
<input type="input" name="run" value=""/>
div.name  //获取不到属性值，从而返回一个undefined
input.name //能获取到属性值
两者十分的矛盾，因此引入的自有属性的通用获取方法

自有属性的通用获取方法

<div name="run" data-size="12"></div>
div.getAttribute("name");//返回run这个属性值
div.setAttribute("class","demo");//设置一个属性，也对应一个属性值，如果属性值不用，则也需要赋值一个“”给他，或则会报错
div.removeAttribute("data-size");//删除这个属性
其中data-size是html5赋予元素的自定义属性，也同样html5也允许自定义标签属性，例如<run></run>

img的src获取是不是十分的恶心呢？–学到这儿是不是要用一下img.getAttribute(“src”);来获取到你想要的值呢。
😃