JS_day10_DOM

---

DOM

全称documet object model,文档对象模型，由html+css组成 DOM利用js操作html+css

DOM的三种节点

<div id="box">你好</div>
//div 就是元素节点	所有元素标签是元素节点
//id就是属性节点		所有属性是属性节点
//你好就是文本节点		所有文本是文本节点

1.元素节点

操作元素节点

element,Element元素节点对象

查：获取元素节点的方式

通过选择器获取

id选择器：

通过id属性获取元素,里面的参数为string类型的id,返回值是一个htmlElement

var box = document.getElementById("box")	//获取id为box的元素
console.log(box)

class选择器

通过class属性名获取对应的元素，他传入的参数为string类型的class名字;

返回值是一个htmlCollectionof(Element),返回的是一个集合，这个集合里面存储了Element

htmlConllection是类似数组的一种结果，具备下标同时具备length

htmlConllection并不是一个数组，他不具备数组的方法，只是存在对应的下标和length属性,可能会有多个属性

var content = document.getElemnetsByClassName("content")
console.log(content[0])

所以我们可以通过下标来获取对应的htmlCollection里面的元素

标签选择器

里面传入的是一个标签名字的string字符串,返回的也是一个htmlCollection

var div = document.getElementsByTagName()
console.log(div)	//这里面是一个htmlCollection

通过下标来进行获取里面的元素

console.log(div[0])

通过name值来获取，返回的类型是一个nodeList,nodeList不是htmlCollection,但是他同样具备对应的下标和length属性，他的方法比htmlCollection要多

var divName = document.getElementsByName()
console.log(divName)
console.log(divName[0])

复合选择器

里面的参数为string类型的选择器，返回第一个匹配选择器的元素,返回的是一个元素element

var selectDiv = document.querySelector("div")
console.log(selectDiv)

返回所有匹配选择器的元素，接受的是一个nodeList

var selectAll = document.querySelectAll()
console.log(divName)
console.log(divName[0])

元素节点的属性

element内置的属性

element.属性名

className属性

var box = document.getElementById("box")
console.log(box.ClassName)	//返回class名字，同样可以进行赋值 set元素属性
box.className = 'jack'	//设置class属性名

tagName属性

获取标签名，document表示整个文档

var content = document.getElementById("content")
console.log(content.tagName)	//tagName是一个只读属性，不能进行获取

document表示整个文档，使用document，获取方法，是在全文中进行获取

var btns = document.getElementById("button")
console.log(btns)

缩小区域进行获取

首先获取content这个div，然后再在div里面进行获取button

var innerBtns = document.getElementById('content').getElementsByTagName('button')
//等同于
//var content = document.getElementById('content')
//var innerBtns = document.getElementsByTagName('button')
console.log(innerBtns)

id属性

console.log(box.id)	//获取id名字
box.id = 'rose'

title属性

console.log(box.title)		//获取title名字
box.title = "刘德华"

style 样式操作 element.style.样式名

box.style.background = 'red'  /
console.log(box.style.background);//获取背景颜色

innerText

获取显示的文本，赋值就是设置对应的文本

console.log(box.innerText)	//获取里面显示的文本（忽略标签，只看文本）
box.innerText = '睡了吗'		//覆盖之前里面的所有内容
box.innerText = '<b>吃了没</b>' //设置文本，是不会解析里面的标签的

innerHTML

获取显示的html内容，赋值就是设置对应的html内容

console.log(box.innerHTML)	//会将里面所有的html代码全部获取
box.innerHTML='<b>吃了没</b>'		他会解析里面的b标签，显示为html设置加粗效果

2.属性节点

操作属性节点：attribute，Attr属性节点对象，设置属性节点

对于input 元素 对应存在name和value属性值

对于img元素存在src属性值

对于a标签 存在href属性

所有元素都自带id,lass,style,title属性值

对于标签本身自带的属性，我们可以通过标签元素，属性名来获取对应的属性值；后天加上去的属性不能获取

<div opo='a' ></div>

通过attributes获取所有的属性

var attrs = box.attributes	//返回的是一个NameNodeMap,里面包含的是多个数据

nameNodeMap里面包含下标，以及length属性，还存在增改（set）删(remove)查(get)的方法

第一种访问

#通过下标进行返回

attrs[0]		//访问第一个属性节点

第二种访问

还可以通过j键（属性名）来进行访问

attrs['opo']		//f访问oppo属性节点

访问里面的属性个数

attrs.length		//返回3

第三种访问

通过item方法，获取的是getNameItem方法

attrs.item(0)	//访问第一个属性，相当于attrs[0]
attrs.getNameItem('opo')//访问名字为opo的属性内容，attrs['opo']==attrs.getNameItem('opo')

第四种 通过attrs.属性名

attrs.opo

通过attributes设置

获取的是一个节点对象attr对象 即属性节点对象，设置的时候也要是属性节点对象

attrs.opo = "opo='123'"	//无法设置
attrs.opo = attrs.id	//只读的 不能进行重新赋值


attrs.removeNameItem('opo')	//删除opo这个属性名对应的属性节点

//attrs表示一个属性节点对象，设置方法需要传递进去一个新的属性节点对象
//创建一个属性节点对象	参数为属性名
var opo = document.createAttribute('opo')
opo.value = 'hello'	//给节点属性值

attrs.setNameItem(opo)
//attrs.opo = opo

属性操作

属性节点操作（对attr属性节点进行操作）

attributes 获取所有的属性节点，返回的是一个NameNodeMap.

可以通过下标以及对应的属性名进行方法.

NameNodeMap里面存在三个方法：getNameItem-获取属性节点,removeNameItem-移除属性节点，setNameItem-属性节点.

属性节点不直接进行赋值，需要修改可以调用setNameItem()， 里面需要传入一个新的属性节点

var opo = document.createAttribute('opo')//创建属性节点
opo.value = 'hello'

属性操作的方法(对元素进行操作，常用)

对于本身天生就有的属性,直接通过元素.属性名来获取

对于本身不是天生就有的

可以通过getAttribute()来获取（只要是里面的属性都可以获取）

var name = box.getAttribute('name')	//参数1为属性名
console.log(name);

var boxClass = box.getAttribute('class')//参数1属性名
console.log(boxClass)

可以setAttribute()方法进行设置

参数1为属性名，参数2为属性值，两个属性都是string

box.setAttribute('username','123') //属性名为username,属性值为123

可以通过removeAttribute()方法删除

参数是你需要删除的属性名 removeAttribute

box.removeAttribute('class')		//删除class属性

属性和属性节点操作方法的区别：

element的三种方法（比较常用）：getAttribute(),setAttribute(),removeAttribute();

NameNodeMap（属性节点）里面存在三种方法：getNamedItem(),setNamedItem(),removeNamedItem()；

1.属性节点是属于节点对象，属性是属于元素中的一个属性，属性在元素中被获取为节点；

2.节点是一个对象，属性是一个对象里面的属性；

3.属性节点包含属性，参数为属性名；

4.属性节点是对象，元素节点包含属性节点；

5.统一获取的话，可以使用attributes,返回的是一个属性节点集合

3.文本节点

操作文本节点：text，Text元素节点对象 设置文本节点

节点的共有属性

元素节点有，属性节点有，文本节点有

var title = document.getElementByIdTagName('title')[0]
console.log(title.nodeName)	//节点名称
console.log(title.nodeType)	//节点类型 元素节点1，属性节点2，文本节点3
console.log(title.nodeValue)	//节点值 元素节点为null,属性节点为属性值，文本节点为文本值

子节点

var box = document.getElementById('box')
box.childElementCount	//返回节点的子元素个数 
box.childNodes	//返回所有的节点集合，返回类型是一个nodeList,包含所有的子节点
box.children		//返回子元素，返回的是一个htmlCollection，只包含元素节点

DOM元素节点之间的关系

主要划分为：父元素，子元素，兄弟元素（同胞元素）

<div id ="box">
	<span>000</span>
	abc<div id="innerBox">
		123<b>4</b>456
	</div>efg
	<p>2</p>
	<a>3</a>
</div>
//box里面包含div和对应的p和a标签
//innerbox里面包含了b标签

var innerBox = document.getElementById("innerBox")

父节点 parentNode(一个)

console.log(innerBox.parentNode)	//获取父节点
console.log(innerBox.parentElement)//获取父元素，返回element

子节点 children（多个）

console.log(innerBox.children)	//获取所有的子元素节点
console.log(innerBox.children[0])	//获取第一个子节点(常用)

获取子节点（获取的是多个）-元素节点 ，不包含文本节点，返回的是一个htmlCollection

子节点集合

子节点会包含所有的元素节点，属性节点，文本节点。

console.log(innerBox.childNodes)	//不常用

获取第一个子节点firstChild

相当于innerBox.children[0]
又有不一样的点：firstChild这个获取的包含了元素节点，属性节点以及文本节点

console.log(innerBox.firstChild)

获取最后一个子节点（包含文本节点）

console.log(innerBox.lastChild);

兄弟 处在一级的标签元素

上一个兄弟 next；

下一个 兄弟pre.

console.log(innerBox.nextSibling)	//下一个兄弟节点efg
console.log(innerBox.previousSibling)	//上一个兄弟节点abc

//上一个兄弟元素节点
console.log(innerBox.nextElementSibling)	//没有就返回null
//下一个兄弟元素节点
console.log(innerBox.previousElementSibing);// 没有返回null,找到p标签

节点操作的方法

元素节点操作的方法

创建元素节点

document.createAttribute('属性名').value='属性值'	//创建属性节点,必须要给属性节点赋值
var a=document.createAttribute('name')
a.value='rose'
p.setAttributeNode(name)	//设置属性节点（一般不用），建议使用setAttribute

//创建元素节点,需要传递标签名，第一个参数，第二个参数为选项可省略
document.createElement（'div'）	//创建一个元素div，返回类型的是一个element
div.className = 'hello'	// 创建的div元素指定对应的class属性值
div.innerText = '你吃饭了吗' 	//给创建的div设置文本

添加子节点 appendChild

var body = document.getElementByTagName('body')[0].appendChild(div)	//获取body,给body添加一个子节点
//添加只能添加最后
//要添加到最前面可以使用insertBefore()

document不能直接添加子节点

删除子节点

body.removeChild(div)

替换子节点

var p = document.createElement('p')
p.innerText = '我是p标签'
p.style.background = 'red'
body.replaceChild(p,div)	//将div替换为p

文本节点操作的方法

创建文本节点

var text = document.createTextNode('hello 你好')
p.appendChild(text)	//将文本节点添加到p标签,从后面添加

//insertBefore()添加到某个子节点前面,第一个是你需要添加的节点，第二个是子节点
p.insertBefore(hello,text)
//hello对应的节点添加到text节点之前，里面的两个节点都会存在p节点中

克隆一个节点

var text1 = text.cloneNode()	//c克隆一个新的节点
p.appendChild(text1)

onScroll

表示的是滚动栏滚动事件

//给window添加一个滚动栏滚动事件
window.onScoll = function(){
	//console.log("触发了")
	//获取滚动栏离上面的距离 ,离上面的顶层的距离或者可视区域的距离
	//具备浏览器兼容，前者ie67没问题，后者谷歌兼容
	var scrollTop = documentElement.scrollTop|document.body.scrollTop
	console.log(scrollTop)
	document.querySelector('div').innerText = scrollTop
}