DOM

DOM

document object model 文档对象模型 操作html

document是最大的dom对象

dom对象：js中把标签，称为dom对象

获取元素

• 通过元素的id获取

  document.getElementById(“id名字”)

  返回值：dom对象

• 通过元素的标签名获取

  document.getElementsByTagName(“标签名”)

  返回值： 类数组

  注意：

  ​ 前面的document也可以是别的dom对象，只要是它的祖先元素就可以，在祖先元素的范围内去找某些标签

  好处：范围进一步缩小

• 通过 元素的 类名来获取元素 IE8以下不支持

  document.getElementsByClassName(“class值”)

  返回值：类数组

  注意： 前面的document也可以是别的dom对象，只要是它的祖先元素就可以，在祖先元素的范围内去找某些标签

  好处：范围进一步缩小

如何获取目标元素

target属性 保存了目标元素 DOM标准

srcElement属性 IE

兼容： var target = e.target || e.srcElement;

新增 h5选择器

document.querySelector(“css选择器”)

​ 找到第一个符合条件的元素，就立即返回，返回是dom对象

document.querySelectorAll(“css选择器”)

​ 找到所有的符合条件的元素，返回的数类数组

DOM操作

创建一个dom对象
document.createElement("标签名");
插入：
	内部
		父元素.appendChild(插入的元素)
		作为父元素的最后一个子元素插入的
	外部
		父元素.insertBefore(新的元素,在谁之前);
删除
	父元素.removeChild(删除的元素)
替换一个元素
	父元素.replaceChild(新的元素,被替换的元素);
	
文档碎片：
	var arr= [1,2,3,4,5,56];
			var list = document.getElementById("list");
			var container = document.createDocumentFragment();
			for(var i=0;i<arr.length;i++){
				var oli = document.createElement('li');
				oli.innerHTML = arr[i];
				container.appendChild(oli);
			}
			list.appendChild(container)
	作用：提高代码运行效率，减少页面的重新渲染
	页面什么时候回重新渲染（dom重构和回流）：
	当我们改变了元素的布局相关样式
   （宽高、位置、元素显示消失）

元素属性操作

获取元素的属性

​	元素.getAttribute("属性名");  *****

设置元素的属性

​	元素.setAttribute("属性名",值);  了解

移除一个元素的属性  

​	元素.removeAttribute("属性名");   了解
dom对象也是对象 具备对象的基础语法
获取：
	元素.属性名
	元素['属性名']
设置
	元素.属性名=值
	元素['属性名']=值

{
	nodeName:"DIV",
	innerHTML:"内容",
	className:"class属性",
	style:{
		
	}
}
dom对象：在html中自定义的属性，是不在dom中的，就不能通过对象名.属性名，js为了方便使用，封装了方法 getAttribute() 可以获取自定义属性

总结：
	获取元素的属性
	元素.属性    可以获取元素本来就有的属性 也可以获取在js中自定义的属性  90%需求
	元素[属性]  在属性是一个变量的时候用   5%
	getAttribute()  万能  在html中自定的属性， 就用它 5%
	设置：
		元素.属性 = 值
		元素[属性]=值
		元素.setAttribute("属性",值)

获取和设置元素的类型

className属性 可以获取 可以设置

元素.className获取

元素.className = 值

获取和设置元素的内容

文本内容

​ innerText 只包含文本 不包含标签

html内容

​ innerHTML 包含标签 *****

获取元素的样式

js中是通过内联的形式来设置元素的样式
原因：
	1，内联的优先级别最高， 保证js代码添加样式一定有效果
	2，只针对当前标签有效，不会影响全局的代码
<div style="width:200px;height:200px"></div>
{
	style:{
		width:"200px",
		height:"200px"
	}
}
元素.style.css属性名 = "值"
注意：
	js中是不允许出现 - css属性中有很多连接符  background-color -webkit-transform-origin
	去 - 变驼峰
	元素.style.backgroundColor
	元素.style.WebkitTransformOrigin="center center"
获取内联样式的值
	前提：必须通过内联设置某个css属性的值，才能 通过 元素.style.属性 否则没有值