DOM编程（包含js与css交互）

什么是DOM？

DOM是文档对象模型，是Document Object Model 的简称。通过DOM可以动态的改变文档内容，动态改变文档内容的原理是通过解析文档（如HTML）并生成DOM树。通过DOM标准接口+编程语言改变文档内容。

目录

一、DOM树

二.document对象常用方法

 三.document对象方法

四.获取dom对象

五. *** 作dom对象属性

六.通过classList修改类名，修改样式

七. *** 作dom对象节点 :

 八.节点的 *** 作

九.表格dom的 *** 作

十.select下拉框

十一.事件的注册(事件的监听）

十二：JS与CSS交互

---

一、DOM树

document也是一个元素（Element）对象，document是网页中最大的父级元素。

​

二.document对象常用方法

方法	描述
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
getElementsByClassName()	返回带有指定类名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

 三.document对象方法

通过css选择器的方式去查询节点

1）document.querySelector(“选择器”)  获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素  

2）document.querySelectorAll(“选择器”)  获取满足条件的所有元素--结果是类数组 注意选择器：id选择器   #id值           类选择器   .类名           标签选择器   标签名

四.获取dom对象

getElementById() 按元素的ID名称来访问，返回对拥有指定id的第一个对象的引用
getElementsByName() 按元素的name名称来访问，返回带有指定名称的对象的集合
getElementsByClassName() 按元素的类名来访问，返回带有指定类名的对象的集合
getElementsByTagName() 按标签来访问，返回带有指定标签名的对象的集合

新增获取dom元素
1）document.querySelector(“选择器”) 获取单个
元素，如果获取的元素不止一个，那么只会返回
满足条件的第一个元素 
2）document.querySelectorAll(“选择器”) 获取满
足条件的所有元素--结果是类数组
注意选择器：
 id选择器 #id值 
 类选择器 .类名 
 标签选择器 标签名

 

五. *** 作dom对象属性

查看/修改/删除属性节点
getAttribute("属性名") 
setAttribute("属性名","属性值") 
removeAttribute(“属性名”)
HTML DOM也可简化为对象名.属性值进行读取或
修改
DOM对象.属性名称
DOM对象[属性名称]

	
		
		
	
	
		属性修改
		

		修改图片
		
	

六.通过classList修改类名，修改样式

toogle()切换类名
add() 添加类名
remove() 删除类名
contains()检测是否包含类名

	
		
		
		
	
	
		 切换
		 
		 	学前端月薪过1.5万
		 
		 
	

七. *** 作dom对象节点  节点关系:

1.父子
父节点 parentElement
所有子节点 children
第一个子节点 firstElementChild
最后个子节点 lastElementChild

2.兄弟
上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling

	
		
		
		
	
	
		节点关系查找
		
			
你好我是p1
			
你好我是p2
			
你好我是p3
			小小标题
		
		
		 
		
	

 八.节点的 *** 作

创建节点
document.createElement(tag)

删除节点：
elem.remove()
elem.parentElment.removeChild(elem)

复制节点 ,不带子节点
var elem2 = elem.cloneNode(false)

复制节点，带子节点
var elem3 = elem.cloneNode(true)

插入节点
parent.appendChild(elem) 将elem插入到parent最后面

插入节点
parent.insertBefore(新的节点，相关节点)
把新的节点插入到 相关节点的前面

替换节点
parent.replaceChild(新的节点，被替换的节点)

	
		
		
	
	
		节点的创建与插入
		创建并插入
		复制图片
		删除图片
		指定位置
		

		
咱们是哟个
		 
		
	
	

九.表格dom的 *** 作

创建行
row = table.insertRow(index)

创建列
col = row.insertCell(index)

设置列的内容
col.innerText="xxx"

选择第一行
table.firstElementChild.fristElementChild

	
		
		
	
	
		 

			

				
书名
 
价格
 
 *** 作
			
				
精通js
 
16.8
 
删除
			
			
				
60个瞬间
 
32.2
 
删除
			
		 
		 增加一行
		 删除第一行
		修改标题
		
	 
	

十.select下拉框

创建一个option
var option = new Option(text,value)

插入一个option
select.add(option,before)

	aaa
	bbb
	ccc

//方法一：
$("#selectExample").val('1');//设置value为1的option选项为默认选中
//方法二：
$("#selectExample option[value='1']").prop("selected",true);
//方法三：
$("#selectExample option[value='1']").prop("selected",selected);

十一.事件的注册(事件的监听）

js响应事件有三种监听方式：

1.DOM0 在html标签中

2.DOM1 实现js与html分离
btn.οnclick=callMe;
btn.onclick = function(){}
(多次注册，只会执行最后一个)

3.DOM2 可以添加多个，也可以移除
btn.addEventListener(“click”,callMe)
btn.addEventListener("click",function(){})

备注：移除全部click
btn.removeEventListenter("click")
移除一个
btn.removeEventListenter("click",callMe)

	
		
		
	
	
		事件的监听
		点我
		随意
		
	

十二：JS与CSS交互

1.常用事件

名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

2. 获取样式属性值

获取行内样式的方法 document.getElementById(elementId).样式.属性名

var divObj=document.getElementById("test");
var objTop=divObj.style.top;

3.获取样式属性值

获取类样式的方法

getComputedStyle()   //全局方法

currentStyle      //ie专有的方法

var divObj=document.getElementById("test");
var objTop= divObj.currentStyle.top;
var objTop =document.defaultView.getComputedStyle(divObj,null).top;

4.查看滚动条的滚动距离

window.pageXOffset/pageYOffset            IE8及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop    兼容性混乱，用时可取两个值相加，因为不可能存在两个同时有值

5.浏览器窗口可视大小

window.innerWidth/innerHeight（内容+内边距）              IE8及IE8以下不兼容 window.documentElement.clientWidth/clientHeight              标准模式下任意浏览器都兼容 window.body.clientWidth/clientHeight             适用于怪异模式下的浏览器（向后兼容）

6.查看元素尺寸和位置

查看元素尺寸（内容+padding+border）     dom.offsetWidth, dom.offsetHeight

查看元素位置     dom.offsetLeft, dom.offseTop   对于无定位父级的元素，返回相对文档的坐标；对于有定位父级的元素，返回相对于最近的有定位的父级的坐标；            

 dom.offsetParent              返回最近的有定位的父级，如无返回body，body.offsetParent返回null

一、值 offsetHeight = clientHeight+滚动条+ 边框。

二、浏览器兼容性

var w=document.documentElement.offsetWidth||document.body.offsetWidth; 
var h=document.documentElement.offsetHeight||document.body.offsetHeight; 
   
 //eg:求元素相对文档的坐标 getElementPosition

7.让滚动条滚动

window上有3个方法 ：scroll()    scrollTo()      scrollBy()

三个方法类似，都是将x,y坐标传入，即实现让滚动轮滚动到当前位置 区别，scrollBy会在之前数据上做累加。 Eg：利用scrollBy做快速阅读的功能

8.查看元素的集合尺寸(不常用)

domEle.getBoundingClientRect();   //只相对于可视区窗口 该方法返回一个对象，对象里有left，top，right，bottom。Left和top代表左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标。 宽高值兼容到ie9+ 返回的结果并不是实时的    有了这个方法，获取页面元素的位置就简单多了。

 var x = dom对象.getBoundingClientRect().left +  
 document.documentElement.scrollLeft;
 var y = dom对象.getBoundingClientRect().top + 
 document.documentElement.scrollTop;

9.自定义属性

1>如何定义

规范： i：以data-开头    ii：data后必须有一个字符

建议： i：名称都小写     ii：名称中最好不要包含特殊符号

2>如何获取

方法：dom对象.dataset[属性名]，属性名必须使用驼峰法命名。