关于DOM有如下的知识点
document 对象
Element(表示html元素)
document:
每个载入浏览器的html文档都会策划归纳为document对象。document对象中包含了文档的基本信息，我们可以通过javascript对html页面中的所有元素进行访问和修改
Element
元素的获取
元素的操作（创建，删除，克隆）
属性文本操作的操作
关于宽高的api
Element对象表示html元素
Element对象可以拥有类型为元素节点，文本节点，注释节点的子节点，DOM提供了一系列的方法可以惊醒元素的增，删，改，查的操作
查询元素(获取元素)：
getElementById()
通过id值去获取元素
var item = document.getElementById('itme')；
getElementsClassName()
通过class类名去获取元素
var item = document.getElementsClassName('itme')；
getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
var navItem = document.getElementsClassName('itme nav')
getElementsByName()
通过选择拥有name属性的html元素
//假设有一个dom元素<input name="username">
var int = document.getElementsByName('username')
getElementsByTagName()
通过标签名获取元素
var int = document.getElementByTagName('input')
querySelector()
返回匹配指定的css选择器的元素节点，如果有多个节点满足匹配条件，则返回第一个匹配节点
//选择id为game的元素
var el1 = document.querySelector('#game')
//选择属性type=text的元素
var el2 = document.querySelector('[type=text]')
querySelectorAll()
返回匹配指定的css选择器的元素节点，返回NodeList类型的对象
var li = document.querySelectorAll('li')
创建元素
createElement()
createElement方法用来生成Html元素节点
var newDiv = document.createElement('div')
createTextNode()
createTextNode()方法用来生成文本接待你，参数为所生成的文本节点的内容
var newText = document.createTextNode('Hello');
createDocumentFragment()
createDocumentFragment()方法生成一个DocumentFragment对象
var docFragment = document.createDocumentFragment();
修改元素
appendChild()
在元素末尾添加元素
<style>
ul{
border:1px solid red;
padding:10px;
}
li{
border:1px solid green;
height:10px;
}
</style>
<ul></ul>
<script>
function $$(node){
return document.querySelectorAll(node)
}
var liNew = document.createElement('li')
$$('ul')[0].appendChild(liNew)
</script>
insertBefore()
在元素之前插入元素
xxx.insertBefore(yyy,zzz)
xxx:被插入元素
yyy:插入元素
zzz:在被插入元素之前
<ul>
<li>hello</li>
</ul>
<style>
ul{
border:1px solid red;
padding:10px;
}
li{
border:1px solid green;
height:30px;
}
</style>
<script>
function $$(node){
return document.querySelectorAll(node)
}
var liNew = document.createElement('li')
$$('ul')[0].insertBefore(liNew,$$('ul')[0].firstChild)
</script>
replaceChild()
replaceChild()接受两个参数，要插入的元素和要替换的元素
<ul>
<li>hello</li>
</ul>
<style>
ul{
border:1px solid red;
padding:10px;
}
li{
border:1px solid green;
height:30px;
}
</style>
<script>
function $$(node){
return document.querySelectorAll(node)
}
var liNew = document.createElement('li')
$$('ul')[0].replaceChild(liNew,$$('ul')[0].firstChild)
</script>
属性操作
getAttribute()获取元素的属性值
node.getAttribute('id')
createAttribute()
createAttribute()方法生成一个新的属性对象节点，并返回它
setAttribute()
用于设置元素的属性
$$('ul')[0].setAttribute('name','我是周杰伦')
//内有两个参数，分别书属性名和属性参数
removeAttribute()
用于删除元素属性
node.removeAttribute('id')
//删除节点id这个属性
innerHTML
元素内html内容
innerText
元素内文本内容
node.value
input可以使用,input内的内容
<div id="box">
<span>你好呀</span>
</div>
<input type="text" value="aaa"></input>
<script>
function $(node){
return document.querySelector(node)
}
function $$(node){
return document.querySelectorAll(node)
}
var html = $('#box').innerHTML
var str = $('#box').innerText
var intStr = $$('input')[0].value
console.log(html) //<span>你好呀</span>
console.log(str) //你好呀
$$('input')[0].onclick = function(){
console.log(intStr) //aaa
}
</script>
class操作
var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //删除 class
nodeBox.classList.toggle('active') //新增/删除切换
node.classList.contains('active') // 判断是否拥有 class
修改样式
可以直接修改元素style属性，修改结果直接反应到页面元素
document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'
获取样式getComputedStyle,最好通过这种方式获取，不要通过Node.style的方式获取
var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)
ps:getComputedStyle可以理解成获取元素的最终的样式
页面宽高
element.clientHeight element.clientWidth//文本宽高
element.offsetHeight element.offsetWidth// 文本占据总高（加上border）
element.scrollHeight //元素滚动内容总长度
element.scrollTop //滚动的高度
常见用法
//判断滚动条是否到底了
//整个滚动区域高度-滚动条高度小于或者等于当前元素高度
if(box.scrollHeight-box.scrollTop<=box.offsetHeight){
console.log('到底了')
}
网友评论