js初阶学习路线

jsDay08-12月30日

今日目标：
1.掌握操作DOM的方法：CRUD （增，删，查，改）
2.掌握DOM事件的初步认识
3.事件处理函数的返回值

1. 获取html节点和body节点

• 获取html节点：

	document.documentElement  //获取html节点

• html节点的重点属性

	document.documentElement.clientWidth; //获取整个窗口的宽度
	document.documentElement.clientHeight; //获取整个窗口的高度

• 获取body节点：

	document.body //获取body节点

• body节点重点属性：

	document.body.clientWidth; //获取内容区域的高度
	document.body.clientHeight; //获取内容区域的宽度

代码示例

		//获取窗口的宽高
        let HtmlDomW = document.documentElement.clientWidth;
        let HtmlDomH = document.documentElement.clientHeight;
        console.log(HtmlDomW);
        console.log(HtmlDomH); 
        //获取内容的宽高
        let BodyW = document.body.clientWidth;
        let BodyH = document.body.clientHeight;
        console.log(BodyW);
        console.log(BodyH);

2.操作DOM（重点）

• （1）dom中的查找节点属性

parentNode属性用法

	//查找父级节点的属性：parentNode
	子节点.parentNode //通过子元素来查找父元素

此属性在js中较为常用，重点记忆

不常用

	//查找父节点中的第一个子节点
	父节点.firstChild //不推荐使用，有bug
	//推荐使用如下
	父节点.firstElementChild

不常用

	//查找父节点中的最后一个子节点
	父节点.lastChild //不推荐使用，有bug
	//推荐使用如下
	父节点.lastElementChild

不常用

	//查找同级兄弟中的上一个节点
	子节点.previousElementSibling;
	//查找同级兄弟中的下一个节点
	子节点.nextElementSibling;

• （2）创建元素(重点)
  document.creatElement(“标签名”);

	//1.创建元素节点：
	document.creatElement("标签名");
	//2.添加标签上的属性：
	元素对象.setAttribute("属性名","值") //每次只能创建一个
	//推荐添加属性的方式：
	元素对象.属性名 = 值

给dom元素添加内容

	//innerHTML 会识别纯文本和标签名
	元素名.innerHTML    		//获取内容
	元素名.innerHTML = "值"  //设置内容
	//innerText 只识别纯文本
	元素名.innerText    		//获取内容
	元素名.innerText = "值"  //设置内容

• （3）添加节点
  appendChild() (重点记忆)
  insertBefore(newChild，old)

	//1.在指定父级之后添加节点
	父节点.appendChild();
	​//2.在指定兄弟级之前添加节点
	父节点.insertBefore(newChild，old);

• （4）替换节点
  replaceChild(newChild, old)

	//1.使用新节点替换旧节点
	父节点.replaceChild(newChild, old)

• （5）删除节点
  removeChild()

	//1.删除子节点
	父节点.removeChild()

3. 事件的初步认识 重点

​ 概念：用户与计算机交互的方法，鼠标点击，移动，抬起等·······

​ 事件的四要素：

​ 1.事件源：事件发生在谁身上，谁就是事件源。

​ 2.事件类型：发生的是哪类事件。如：onclick…

​ 3.事件处理函数（事件句柄）：发生这个事件所执行的函数或方法

​ 4.事件对象：发生事件时所产生的对象（这个对象就像旁边者，里面包含了所有与事件相关的信 息，如当前点击的位置，点击的哪个元素…）

​ 事件的类型：

​ 鼠标事件，键盘事件，表单事件，窗口事件，声控事件，触摸事件…

​ 事件注册的三种方式

​ 1.通过标签上的事件属性来注册（缺点：HTML代码和JS代码没有分离，后期找bug不好找）

<div onclick="fn(e)">盒子1</div>

​ 2.通过元素对象来注册事件（使用率较高，同类型的事件后面定义的事件会覆盖前面的）

​ 元素对象.事件类型 = function() {}

​ 第一种：box.onclick = function () {}

​ 第二种：box.onclick = fn; //这里不加括号，加了就是直接执行此函数

​ function fn() {}

​ 3.通过事件监听来注册事件
dom.addEventListener(“事件名”，函数) 企业用法

窗口事件

​ 作用：主要让网页中的所有资源加载完成后，才执行js代码（所有资源：图片，音频，dom元素）

​ 写法：window.onload = function () {}

事件处理函数的返回值

​ 比如：return false; 阻止元素的默认事件：a标签的跳转