JavaScript学习笔记——DOM
1.DOM
DOM:Document Object Model 文档对象模型，这是W3C组织推荐处理可扩展标记语言的标准编程接口。
DOM是一种基于树的API文档，同时DOM又称文档树模型。
document
Root element（<html>）
element（<head>） element（<body>）
element（<title>） element（<a>）——属性:href
Text（文本内容） Text（文本内容）
- 文档：一个网页可以称为文档
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
- 元素：网页中的标签
- 属性：标签的属性
DOM经常进行的操作
- 获取元素
- 对元素进行操作(设置其属性或调用其方法)
- 动态创建元素
- 事件(什么时机做相应的操作)
2.获取页面元素
获取id值：element = document.getElementById(‘id名’);
由于id具有唯一性，有些浏览器支持直接使用id名字访问元素，但是不是标准的方法，推荐使用getElementById()。
获取标签名：element = document.getElementsByTagName(‘标签名’);
根据标签名获取元素返回的是集合 HTMLCollection，可以类似数组那样遍历和获取页面元素。
注意：获取元素的类型就是标签元素对应的类型，与获取id值返回的类型相同。
.根据name获取元素：document.getElementsByName(name名); 返回的是集合。
根据类名获取元素： document.getElementsByClassName(类名); 返回的是集合。
根据选择器查询页面的元素
document.querySelector(选择器：id# ，class类名.);获取的元素是相应选择器查找到的第一个元素，查询元素的是选择器，不是选择器名，所以要加上#或者.。
document.querySelectorAll(选择器); 获取的是对应选择器所有的标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取页面元素</title>
</head>
<body>
<div id="main">Hello World</div>
<div>Hello</div>
<div>World</div>
<div id="box">
<p>123</p>
<div>456</div>
<h1>789</h1>
</div>
<div class="test">
this is a test.
</div>
<div>
<input type="text" name="text">
</div>
<div class="a">a标签1</div>
<div class="a">a标签2</div>
<div class="b">b标签1</div>
<p class="a">a标签3</p>
<script>
var main = document.getElementById('main');
console.dir(main); //console.dir() 控制台打印对象的方法
var divs = document.getElementsByTagName('div');
console.dir(divs);
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
var box = document.getElementById('box');
var p = box.getElementsByTagName('p'); //可以在id标签下 获取相应的标签名内容
console.log(p);
var test = document.getElementsByClassName('test');
console.log(test);
var input = document.getElementsByName('input');
console.log(input);
//注意添加的是选择器，不是选择器名 需要加上.和#
var a = document.querySelector('.a'); //此时查询的是第一个class = a的标签
console.log(a);
var divs = document.querySelectorAll('.a'); //获取所有类选择器为a的标签
for (var i = 0; i < divs.length; i++) {
console.log(divs[i]);
}
</script>
</b**加粗样式**ody>
</html>
3.节点操作
HTML是树形结构：HTML是根元素，根元素下面有head，body等子节点，子节点下面还有子节点，子节点之间彼此互为同胞。
节点属性：
nodeType： 节点的类型 1 元素节点 2 属性节点 3 文本节点
nodeName ：节点名称
nodeValue ：节点值，元素节点的nodeValue始终是null
父节点和子节点的操作
获取父节点：parentNode ；获取子节点 childNodes，返回的是List集合； 获取子元素 children。
获取所有的子节点之后，如果要获取子元素，需要进行循环遍历，并且判断nodeType = 1。
注意：每一个元素的父节点只有一个，但是子节点有多个，获取子节点包含了所有的节点，如果只需要获取节点元素，使用children。
获取第一个和最后一个元素/节点
获取第一个节点：firstChild 获取第一个元素：firstElementChild
获取最后一个节点：lastChild 获取最后一个元素：lastElementChild
firstElementChild和lastElementChild有浏览器兼容问题 IE9之后才支持
节点的操作是属性，而不是方法
兄弟节点的操作
nextSibling和previousSibling获取的是节点；
获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素。
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持。
4.动态创建元素
创建元素的三种方式：
1.document.write(); document.write()在触发事件的时候使用，会将整个页面的内容覆盖。
2.element.innerHTML 每使用一次就会重新绘制页面的结构，所以使用innerHTML，需要考虑性能问题，但是不会将之前的页面覆盖。
注意：innerHTML创建的是字符串，要注意字符串拼接问题，使用+拼接。
3.document.createElement(‘标签名’); 在内存中添加一个标签，在其他标签内添加需要使用appendChild()方法。
动态创建标签后，设置的属性没有-符号，第二个单词改为首字母大写 如text-align，textAlign。
三种方式的性能比较
- innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
- 可以借助字符串或数组的方式进行替换，再设置给innerHTML， 优化后与document.createElement性能相近。
常见的元素操作方法
createElement()：创建一个新的标签
appendChild()：将标签添加到另一个标签的末尾
removeChild()：删除标签
insertBefore(标签，参考位置)：在指定位置之前插入标签
replaceChild(新标签，替换的标签)：把当前元素的标签进行替换
//id为box的盒子内添加h2元素，然后把h2标签替换成p元素
var p = document.createElement('p');
p.innerText = 'Hello World';
p.style.color = 'red';
var box = document.getElementById('box');
var h2 = box.getElementsByTagName('h2');
box.appendChild(p);
box.replaceChild(p,h2);