JavaScript-DOM基础

DOM介绍 

事件介绍 

文档加载

DOM查询 

DOM介绍 

        浏览器已经提供了文档节点对象 时window属性，可以在页面中直接使用（document文档节点代表整个网页） 

		<button id ="btn">按钮</button><script>//获取button对象var btn = document.getElementById("btn");console.log(btn);//修改按钮文字btn.innerHTML = "被修改过的按钮" //获取标签内部html内容</script>

事件介绍 

        事件就是用户和浏览器之间的交互行为，如：点击按钮、鼠标移动、关闭窗口……

处理事件

        定义onclick我们可以在事件对于的属性中设置一些js代码，当事件被触发时这些代码会被执行。

<button id ="btn" onclick="alert('点我干嘛')">按钮</button>

        可以为按钮的对应事件绑定处理函数的形式来响应事件 （象这种为单击事件绑定的函数一般称为单击事件绑定函数）

		<button id ="btn">按钮</button><script>//获取按钮对象var btn = document.getElementById("btn");//绑定单击事件btn.onclick = function(){alert("点我干嘛")；}</script>

文档加载

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

//为window绑定响应事件
window.onload = function(){//触发代码
}

DOM查询 

获取元素节点

通过document调用

1. getElementById()

– 通过id属性获取一个元素节点对象

2. getElementsByTagName()

– 通过标签名获取一组元素节点对象

3. getElementsByName()

– 通过name属性获取一组元素节点对象

获取元素节点的子节点

通过具体元素节点调用

1. getElementsByTagName()

– 方法，返回当前节点的指定标签名后代节点

2. childNodes

– 属性，表示当前节点的所有子节点

3. firstChild

– 属性，表示当前节点的第一个子节点

4. lastChild

– 属性，表示当前节点的最后一个子节点

元素节点的属性

• 获取，元素对象.属性名

例：

element.value

element.id

element.className

• 设置，元素对象.属性名=新的值

例：element.value = “hello”

element.id = “id01”

element.className = “newClass”

• nodeValue

– 文本节点可以通过nodeValue属性获取和设置

文本节点的内容

• innerHTML

– 元素节点通过该属性获取和设置标签内部的

html代码

节点的修改

• 这里的修改我们主要指对元素节点的操作。

• 创建节点

– document.createElement(标签名)

• 删除节点

– 父节点.removeChild(子节点)

• 替换节点

– 父节点.replaceChild(新节点 , 旧节点)

• 插入节点

– 父节点.appendChild(子节点)

– 父节点.insertBefore(新节点 , 旧节点)