Web前端自学记录（十六） DOM

DOM

1.DOM简介

节点

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

节点的属性

				   nodeName    nodeType    nodeValue
文档节点  		  #document        9          null
元素节点      	    标签名    	   1          null
属性节点     	    属性名          2         属性值
文本节点    	        #text          3         文本内容

浏览器已经为我们提供 文档节点对象，这个对象是window属性
可以在页面中直接使用，文档节点代表的是整个网页

//获取到button对象
       var btn = document.getElementById("btn");
        //修改按钮的文字
        btn.innerHTML = "I'm button";

2.事件

事件：就是用户和浏览器之间的交互行为

比如：点击按钮，鼠标移动，关闭窗口...

可以为按钮的对应事件绑定处理函数的形式来响应事件
这样当事件触发时，其对应的函数将会被调用

var btn = document.getElementById("btn");
       //绑定一个单击事件
       //为单击事件绑定的函数，我们称为单击响应函数
       btn.onclick = function() {
           alert("点击");
       }

3.文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的
读取到一行就运行到一行，如果将script标签写到页面的上边
在代码执行时，页面还没有加载，DOM对象也没有加载，会导致无法获取到DOM对象
将JS代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码

onload事件会在整个页面加载完成之后才触发

为window绑定一个onload事件，该事件对应的响应函数会在页面加载完成之后执行
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload = function(){

}

4.DOM查询

通过document对象调用

getElementById()通过id属性获取一个元素节点对象
getElementsByTagName()通过标签名获取一组元素节点对象
getElementsByName()通过name属性获取一组元素节点对象

获取元素节点的子节点

getElementsByTagName()方法：返回当前节点的指定标签名后代节点
childNodes属性：表示当前节点的所有子节点
firstChild属性：表示当前节点的第一个子节点
lastChild属性：表示当前节点的最后一个子节点

获取父节点和兄弟节点

parentNode属性：表示当前节点的父节点
previousSibling属性：表示当前节点的前一个兄弟节点
nextSibling属性：表示当前节点的后一个兄弟节点

innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义

如果需要获取元素节点的属性

直接使用 元素.属性名
注意：class属性不能采用这种方式
读取class属性是需要采用 元素.className

定义一个函数，专门用来为指定元素绑定单击响应元素

参数：
	idstr 要绑定单击响应函数的对象的id属性值
	fun 事件的回调函数，当单击元素时，该函数将会被执行

function myclick(idStr , fun) {
           var btn = document.getElementById("idStr");
           btn.onclick = fun;
       };

在事件的响应函数中，响应函数是给谁绑定的，this就是谁

5.DOM查询的其他方法

//获取body标签
//var body = document.getElementsByTagName(“body”)[0];

在document中有一个属性body，它保存的是body的引用
document.documentElement;保存的是html根标签
document.all代表页面中所有的元素

根据元素的class属性值查询一组元素节点对象
document.getelementsByClassName() 但是该方法不支持IE8以下的浏览器

document.querySelector()
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
IE8中也可以使用
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，它只会返回第一个

document.querySelectorAll()
该方法和document.querySelector()用法类似
不同的是它会将符合条件的元素封装到数组中返回
即使符合条件的元素只有一个，也会返回数组

6.DOM增删改

方法

appendChild() 把新的子节点添加到指定节点
removeChild() 删除子节点
	用法：子节点.parentNode.removeChild(子节点)
replaceChild() 替换子节点
	用法：父节点.replaceChild(新节点,旧节点)
insertBefore() 在指定的子节点前面插入新的子节点
	用法：父节点.insertBefore(新节点,旧节点)
createElement() 创建元素节点
createTextNode() 创建文本节点

使用innerHTML也可以完成DOM的增删改的相关操作
一般会两种方式结合使用
city.innerHTML += "<li>广州<li>";

点击超链接以后，超链接会跳转页面，这是超链接的默认行为
可以通过在响应函数的最后return fales来取消默认行为

confirm()用于弹出一个带有确认和取消按钮的提示框

需要一个字符串作为参数
如果用户点击确认则返回true，如果点击取消则返回false

后续会持续更新