DOM
2018-03-25 本文已影响23人
好奇男孩
什么是DOM？
- 可能很多人第一反应就是div、p、span等html标签（至少之前我是），但要知道，DOM是Model，是Object Model，对象模型，是为HTML（and XML）提供的API。
- HTML(Hyper Text Markup Language)是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。
- 但在浏览器端，前端们可以用脚本语言（JavaScript）通过DOM去操作HTML内容。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的
6.png
注意：
操作DOM的成本很高（浏览器渲染的reflow和repaint）
document 对象
每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。
document对象常用属性
1.document.location;
location属性返回一个只读对象，提供了当前文档的URL信息
2.document.open()、document.close();
新建一个文档，供write方法写入内容;关闭open方法所新建的文档;
3.document.write();
向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。
4.Element:
- nodeName：元素标签名;
- nodeType：元素类型;
- className：类名;
- id：元素id;
- children：子元素列表（HTMLCollection）;
- childNodes：子元素列表（NodeList）;
- firstChild：第一个子元素
5.查询元素:
- getElementById方法返回匹配指定ID属性的元素节点;
- getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身）;
- getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）;
- getElementsByName方法用于选择拥有name属性的HTML元素;
querySelector方法返回匹配指定的CSS选择器的元素节点。(推荐使用）
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。(推荐使用）
创建元素：
- createElement方法用来生成HTML元素节点。
- reateTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
- createDocumentFragment方法生成一个DocumentFragment对象。
修改元素：
- appendChild()；在元素末尾添加元素
- insertBefore()；在某个元素之前插入元素
删除元素使用removeChild()方法；
cloneNode()克隆元素
方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身；
属性操作：
- getAttribute()用于获取元素的attribute值；
- createAttribute()方法生成一个新的属性对象节点，并返回它；
- setAttribute()方法用于设置元素属性；
- removeAttribute()用于删除元素属性；
- innerText是一个可写属性，返回元素内包含的文本内容；
注意：innerHTML和innerText区别，它不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM；
getComputedStyle获取元素计算后的样式；（不要使用Element.style）
Element.classList ；class 操作：
- classList.add('active') //新增 class
- classList.remove('active') //删除 class
- classList.toggle('active') //新增/删除切换
- classList.contains('active') // 判断是否拥有 class
常规流程
创建元素：
1.createElement方法用来生成HTML元素节点。
2.createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
3.createDocumentFragment方法生成一个DocumentFragment对象。
添加元素：
appendChild()，在元素末尾添加元素；
insertBefore()；在某个元素之前插入元素；
注意：
DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
HTMLCollection 和 NodeList
- 节点都是单个对象，有时会需要一种数据结构，能够容纳多个节点。DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。
- NodeList 对象代表一个有顺序的节点列表，HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性
- 以下方法获取的为HTMLCollection对象
document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.forms //所有form元素
document.scripts //所有script元素
document.body.children
document.getElementsByClassName("class1")
- 以下方法获取的为NodeList对象
document.getElementsByName("name1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.body.childNodes
- 如何查看？
document.body.childNodes.constructor
HTMLCollection与NodeList基本相似
-
相同点： 都是类数组对象，节点的变化都会实时反映在集合中
-
不同点： 少部分方法不一样，比如 NodeList 有 forEach 方法，而 HTMLCollection 没有
范例：
要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片
<title>图片库</title>
<style>
ul{
margin: 10px auto;
text-align: center;
}
li{
display: inline-block;
list-style: none;
padding: 20px 20px;
}
div{
margin: 0 auto;
border: 1px solid #aaaaaa;
width: 400px;
height: 400px;
}
div img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!--要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。-->
<ul class="ct">
<li data-img="http://ww1.sinaimg.cn/large/006JM2pKgy1fpmy18g4toj309q063q37.jpg">查看图片1</li>
<li data-img="http://ww1.sinaimg.cn/large/006JM2pKgy1fpmy1trlqhj309q06374e.jpg">查看图片2</li>
<li data-img="http://ww1.sinaimg.cn/large/006JM2pKgy1fpmy24njg9j309q063jro.jpg">查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var li=document.querySelectorAll("li");
var div=document.querySelector(".img-preview");
for(var i=0;i<li.length;i++){
li[i].addEventListener('mouseover',function(){
var img=this.getAttribute('data-img');
div.innerHTML='<img src="'+img+'">';
})
}
</script>
</body>
7.png
当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.当点击每一个元素li时控制台展示该元素的文本内容。
<ul class="ct">
<li>这里是</li>
<li>杭电</li>
<li>小灰</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
var ul=document.querySelector('.ct');
var li=document.querySelectorAll('.ct li');
var text=document.querySelector('.ipt-add-content');
var addStart=document.querySelector('#btn-add-start');
var addEnd=document.querySelector('#btn-add-end');
ul.addEventListener('click',function(e){
console.log(e.target.innerText);
});
addStart.addEventListener('click',function(){
if(text.value!==""){
var newLi=document.createElement('li');
newLi.innerHTML=text.value;
ul.insertBefore(newLi,ul.children[0]);
}
});
addEnd.addEventListener('click', function (){
if(text.value!==""){
var newLi=document.createElement('li');
newLi.innerHTML=text.value;
ul.appendChild(newLi,ul.children[0]);
}
})
</script>
8.png
切换样式
<div class="box">
<h1>hello world</h1>
<p>pengxiaohui</p>
<button id="add">add</button>
<button id="remove">remove</button>
<button id="toggle1">toggle1</button>
<button id="toggle2">toggle2</button>
</div>
<script>
var add=document.querySelector('#add');
var remove=document.querySelector("#remove");
var toggle1=document.querySelector('#toggle1');
var toggle2=document.querySelector('#toggle2');
var box=document.querySelector(".box");
add.addEventListener('click',function(){
box.classList.add('active');
});
remove.addEventListener('click',function(){
box.classList.remove('active');
});
toggle1.addEventListener('click',function(){
box.classList.toggle('active');
});
toggle2.addEventListener('click', function (){
if(box.classList.contains('active')){
box.classList.remove('active');
}else{
box.classList.add('active');
}
})
</script>
9.png
写一个函数，批量操作 css
function css(node, styleObj){
for(var key in styleObj){
node.style[key]=styleObj[key];
}
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
