JavaScript-DOM基础

DOM介绍 

事件介绍 

文档加载

DOM查询 

DOM介绍 

        DOM，全称Document Object Model文档对象模型。

        浏览器已经提供了文档节点对象 时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

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

5.children

-表示获取当前元素所有子元素

获取父节点和兄弟节点

• 通过具体的节点调用

1. parentNode

– 属性 ，表示当前节点的父节点

2. previousSibling

– 属性 ，表示当前节点的前一个兄弟节点

3. nextSibling

– 属性 ，表示当前节点的后一个兄弟节点

元素节点的属性

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

例：

element.value

element.id

element.className

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

例：element.value = “hello”

element.id = “id01”

element.className = “newClass”

• nodeValue

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

文本节点的内容

• innerHTML

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

html代码

•innerText

-获取元素内部所有的文本内容

节点的修改

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

• 创建节点

– document.createElement(标签名)

• 删除节点

– 父节点.removeChild(子节点)

• 替换节点

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

• 插入节点

– 父节点.appendChild(子节点)

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

使用CSS选择器进行查询

• querySelector()

• querySelectorAll()

• 这两个方法都是用document对象来调用，两个方法使用相同，

都是传递一个选择器字符串作为参数，方法会自动根据选择器

字符串去网页中查找元素。

• 不同的地方是querySelector()只会返回找到的第一个元素，而

querySelectorAll()会返回所有符合条件的元素。

 

		<div class="box1"></div>
		
		<script>
		var div = document.querySelector(".box1 div"); //根据选择器到页面中寻找对象
		</script>