课程内容
1.认识DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
1.1 DOM节点树
1.2节点关系
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>
从上面的 HTML 中：
<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是<html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点
并且：
<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是<body> 的子节点
document 对象
每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。
document对象常用属性
- document.doctype
- document.title
- document.head
- document.body
Element 对象
除了document对象，在DOM中最常用的就是Element对象了，Element对象表示HTML元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，DOM提供了一系列的方法可以进行元素的增、删、改、查操作
Element有几个重要属性
- nodeName：元素标签名，还有个类似的tagName
- className：类名
- id：元素id
- children：子元素列表（HTMLCollection）
- childNodes：子元素列表（NodeList）
- firstChild：第一个子元素
- lastChild：最后一个子元素
- nextSibling：下一个兄弟元素
- previousSibling：上一个兄弟元素
- parentNode、parentElement：父元素
2.节点访问
getElementById() 方法返回带有指定 ID 的元素：如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
var elem = document.getElementById("test");
getElementsByTagName()方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象,也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
var paras = document.getElementsByTagName("p");
getElementsByClassName() 方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
var element=document.getElementsByClassName("intro");
querySelector()
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法无法选中CSS伪元素。
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代码返回class属性是note或alert的div元素。
3.DOM修改添加
修改html内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
<p id="p1">Hello World!</p>
<script>
//改变p1的内容
var el = document.getElementById("p1");
el.innerHTML="New text!";
console.log(el);
</script>
修改html属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新值 document.getElementById(id).setAttribute(属性, 值)
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
document.getElementById("image").setAttribute('class','pic');
</script>
改变样式
element.style.xxx = xxx;
<p id="p1">我是段落，要变色</p>
<button>变色</button>
<script>
document.getElementsByTagName('button')[0].onclick=function(){
document.getElementById('p1').style.color="red";
}
</script>
创建新的 HTML 元素
创建元素，然后把它追加到已有的元素上
<div class="d1">
</div>
<script>
var para=document.createElement("p");
para.innerHtml="我是新添加的段落";
var element=document.getElementById("d1");
element.appendChild(para);
</script>
添加元素
appendChild，使用方法target.appendChild(newChild);
<div id="content"></div>
<button id="btn">添加图片</button>
<script>
var btn = document.getElementById("btn");
btn.onclick=function(){
var img = document.createElement("img");
img.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
btn.appendChild(img);
}
<script>
insertBefore
- insertBefore() 方法的作用是：在现有的子节点前插入一个新的子节点
- insertBefore用法:target.insertBefore(newChild,existingChild)
- newChild作为target的子节点插入到existingChild节点之前
删除元素
removeChild
element.removeChild(img);
网友评论