DOM-1

第一节：DOM树

又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

总结：

文档：一个页面就是一个文档，DOM中使用document表示。

节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

DOM把以上内容都看做成对象。

第二节：获取元素

我们想要操作页面上某个部分（显示/隐藏），就要获取到该部分对应的元素，在对其进行操作。

1. 根据 id     class或类名     标签获取元素

语法：

docunment.getElenmentByld ( " " )  (根据 id 获取元素)

document.getElementsByClassName( " " ) (根据 class 或类名 获取元素)

document.getElementsByTagName( " " ) (根据 标签 获取元素)

2.获取选择器第一个元素

（HTML5 新增）querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号例：class:(" . ")        id:(" # ")     元素(" ")

querySelector( ". box ");

querySelector( "# box ");

querySelector( " box ");

3.根据指定选择器返回所有元素

（HTML5 新增）querySelectorAll( ) 返回指定选择器的所有元素对象

querySelectoAll( ". box ");

querySelectoAll( "# box ");

querySelectoAll( " box ");

<div id="demo">div元素</div>
		
		<p>我是段落1</p>
	     <p>我是段落2</p>
		 <p>我是段落3</p>
		 
		 <span class="demo">我是span1</span>
		  <span class="demo">我是span2</span>
		   <span class="demo">我是span3</span>
		
		<script>
			//1:通过id获取dom元素
			var  divObj = document.getElementById("demo");
			console.log(divObj);
			// 2:通过标签获取元素
			var pObjs = document.getElementsByTagName("p");
			console.log(pObjs);
			//3：通过类名获取元素
			var spanObjs = document.getElementsByClassName("demo");
			console.log(spanObjs);
			
			// 4:html5新增
			// var demoObj = document.querySelector(".demo");//获取第一个元素，class 用"." id用"#"
			var demoObj = document.querySelector("p");//获取第一个p段落
			console.log(demoObj.innerHTML);
			
			var demoObjs = document.querySelectorAll(".demo");
			console.log(demoObjs);

第三节 获取特殊元素

document.body //返回body元素

document.documentElement //返回HTML元素

事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解：触发---响应机制

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

第一节：事件步骤

- 事件源：触发事件的元素（获取事件源）

- 事件类型： 例如 click 点击事件（绑定事件）

- 事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数

var btn = document.getElementById('btn');
btn.onclick = function() {
     alert('鼠标单击事件');//鼠标点击事件
}

第二节：常见的鼠标事件

onclick          鼠标点击左键触发

onmouseover    鼠标经过触发

onfocus         获得鼠标焦点触发

onblur          失去鼠标焦点触发

onmousemove   鼠标移动触发

onmouseup     鼠标弹起触发

onmousedown   鼠标按下触发

第三节：操作元素

JavaScript的 DOM 操作可以改变网页内容、结构和样式。（注意：这些操作都是通过元素对象的属性实现的）。

1.操作元素内容

element.innerText   从起始位置到终止位置的内容，去除了html标签，空格换行也会去掉。

element.innerHtml  起始位置到终止位置的全部内容，包括了HTML标签，同时保留了空格与换行符。

<input type="button" name="onname"  value="白日依山尽"/><br/><br/><br/>
<div>下一句</div>

公式：
获取元素
源.型 = 匿名函数(){
事件发生后的效果
}

- 事件源：触发事件的元素（获取事件源）
- 事件类型： 例如 click 点击事件（绑定事件）
- 事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数
<script>
	 var btn = document.querySelector('input');
	 var div = document.querySelector('div');
	 btn.onclick = function(){
		 // ele_div.innerText = "日久见人心";
		 div.innerHTML = "<span style='color:red;'>日久见人心</span>";	 }
</script>

2.常见的元素属性

innerText  ,   innerHtml     改变元素内容

src  图片

href  链接

id  alt  title

<button id="zy">睁眼</button>
		<button id="by">闭眼</button>
		<img src="./作业/icon_1.png" alt="">
		<!-- <img src="./作业/icon_2.png" alt=""> -->
		<script>
			var zy = document.getElementById('zy');
			var by = document.getElementById('by');
			var img = document.querySelector('img');
			zy.onclick = function(){
				// 点击睁眼之后，让img的src路径发生变化
				img.src = '作业/icon_2.png';
			}
			by.onclick = function(){
				img.src = '作业/icon_1.png';
                //鼠标滑入后会显示标题文字闭眼
                img.title = '闭眼'
			}
		</script>

3.表单元素的属性操作

表单属性：type  value  checked  selected   disabled

type    类型属性

value    值属性

checked    选择

selected     选中

disabled     表单是否被使用

<input type="text" value="改变文字内容">  // 想改变表单的文字内容，用value来改变

	<!-- 就像HTML和css之间的关系，你调用他就要获取他 -->
		<button id="btn">按钮</button>
		<input type="text" value="请点击">
		<script type="text/javascript">
			var btn = document.getElementById('btn');
			var input = document.querySelector('input');
			btn.onclick = function(){
				// 表单里面的值 文字内容是通过 value 来修改的
				input.value = '点击了';
				// 点击后禁用
				btn.disabled = true;
				//或 this.disabled = true
				//this指的是事件函数的调用者
			}
		</script>

btn.value = "被点击了"

btn.disabled = true // 按钮禁用

btn.type = "text"  //改变input 框的类型

4.样式属性操作

element.style                   行业样式操作

element.className         类名样式操作

注意：

1.JS里面样式采取驼峰命名法：比如  fontSize    backgtoundColor

2.JS修改   style  样式操作  产生的是行内样式 css 权重比较高

this.stye          行业样式操作：

在样式比较少或功能简单的情况下使用 element.style    this.stye 来修改元素的样式

div{
				width: 200px;
				height: 200px;
				background-color: blue;
			}

<div></div>

		<script type="text/javascript">
			var div = document.querySelector('div');
			div.onclick = function(){
				// 选中style的时候可以控制改变颜色，大小等
				this.style.backgroundColor = 'red';
				this.style.width = "300px"
			}
		</script>

this.className       类名样式操作：

	div{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			
			.chuange{
				background-color: crimson;
				color: #fff;
				font-size: 25px;
				margin-top: 100px;
			}

<div class="first">文本</div>

		<script>
			var text = document.querySelector('div');
			text.onclick = function(){
				this.className = 'first chuange';
			}
		</script>

注意：

1.如果修改较多，可以采取操作类名方式更改元素样式

2.class因为是保留字，因此使用classNane来操作元素类名属性

3.classNane 会直接更改元素的类名，会覆盖原来的类名，如果想保留原先的类名，我们可以选择用多类名选择器                this.className = ' first chuange ' ;