JsAPIs

逐渐头冷

已于 2022-09-12 18:22:04 修改

阅读量391

点赞数

文章标签： javascript

于 2021-01-29 01:22:47 首次发布

本文链接：https://blog.youkuaiyun.com/java_vava2/article/details/113362467

版权

一、DOM

学习文档：MDN

概念：Document Object Model文档对象模型
作用：简化对页面的操作动态访问程序和脚本
常用功能：获取元素；对元素操作；动态创建元素；事件
console.dir(); 控制台打印具体对象

1.获取元素

1.1 根据id获取元素

方法：调用document对象的getElementByld方法
参数：字符串类型的id的属性值
返回值：对应id名的具体元素对象。
注意：js在html之前，导致结构未加载，不能获取id元素

<p id="para">text1</p>
var para = document.getElementById("para");
para.sytle.background = "pink";
//或直接 para.style.background = "blue";(不推荐，浏览器不兼容)

1.2根据标签名获取元素

方法：调用document 对象的getElementByTagName方法。
参数：字符串类型的标签名。（选中的元素动态变化的）
返回值：同名的元素对象组成的HTMLCollection。

<p>text1<p>
<p>text2<p>
<div>div1<div>
<div>div2<div>
<script>
var ps = document.getElementsByTagName("p");
console.log(ps);
for(var i=0; i<=ps.length - 1; i++;){
    console.log(ps[i]);
    ps[i].style.background = "pink" ;
}
</script>

HTMLCollection 是html元素的集合（不含属性）需要按照操作数组的方式进行
注意：操作时要按照操作数组的方式进行；该方法内部获取的元素是动态增加的（获取时得到空数组，后期添加时候会将数据动态添加到数组）

1.3根据元素对象内部获取元素方法

<div id="box1">
    <p>text1 of box1</p>
    <p>text2 of box1</p>
  </div> 
<script>
    var box1 = document.getElementById("box1");
    var ps1 = box1.getElementsByTagName("p")[0];
    console.log(ps1);
</script>

1.4根据name获取元素（由于IE不兼容不推荐）

方法：调用document对象的getElementByName方法
参数：字符串类型的name属性值。
返回值：name属性值相同的元素对象组成的NodeList(选中的元素动态添加)
注意：在IE和OPERa中有兼容问题，会多选中id属性值相同的元素。

<form>
    <input type="radio" name="age">0~10<br>
    <input type="radio" name="age">11~20<br>
  </form>
  <div id="age">年龄</div>
  <script>
    // 通过标签的 name 属性获取元素
    var ages = document.getElementsByName("age");  // 得到NodeList  节点列表集合  
    console.log(ages);
    // 兼容问题：在 IE 和 Opera中 有兼容问题，会多选中 id 属性值相同的部分
  </script>

NodeList包含元素、文本和属性。

1.5根据类名获取元素

方法：调用document对象的getElementByClassName方法。
参数：字符串类型的class属性值。
返回值：class属性值相同的元素对象组成的HTMLCollection。（会动态添加）
浏览器兼容问题：不支持IE8及一下的浏览器
总结:元素对象内部可以调用getElementsByClassName 方法.

  <div id="box1">
    <p>text1 of box1</p>
    <p class="para">text2 of box1</p>
    <p>text4 of box1</p>
  </div>
  <div id="box2">
    <p>text1 of box2</p>
    <p class="para">text2 of box2</p>
    <p>text4 of box2</p>
  </div>
  <script>
    var paras = document.getElementsByClassName("para");
    // 获取 id 为 box1 的元素对象
    var box1 = document.getElementById("box1");
    var paras1 = box1.getElementsByClassName("para");
    console.log(paras1);//HTMLCollection(2);
  </script>

1.6 根据选择器获取元素

方法1.调用document对象的querySelector方法，通过css中的选择器选择第一个符合条件的标签元素。
方法2.调通document对象的querySelectorAll方法。返回值：方法1返回元素对象；方法2返回NodeList。
参数：字符串类型的css中的选择器。
浏览器兼容问题：不支持IE8以下的浏览器

<div id="box1">
    <p class="para">text2 of box1</p>
    <p class="para">text3 of box1</p>
  </div>
  <div id="box2">
    <p class="para">text2 of box2</p>
    <p class="para">text3 of box2</p>
  </div>
  <script>
    var para = document.querySelector("#box1 .para");//得到一个元素对象
    console.log(para);
    var paras = document.querySelectorAll("#box1 .para");//得到一个元素对象数组
    console.log(paras);
    兼容问题：在 IE8 以下不能使用
  </script>

2.事件

2.1事件源：绑定事件

方法1：绑定HTML元素属性
<input type="button" value="点击" onclic="alert('点我做什么？')">
方法2：绑定DOM对象属性

<input type="button" value="点击" id="btn" )>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function() {
        alert("点我干嘛");    
    };
</script>

原理：JavaScript解析器给所有绑定事件的元素添加监听，只要出发对应绑定事件就会执行事件函数

2.2事件类型：

onclick 鼠标左键单击触发
ondbclick 鼠标左键双击触发
onmousedow 鼠标按下触发
onmouseup 鼠标按键放开触发
onmousemove 鼠标在元素上移动触发
onmouseover 鼠标移动到元素上触发
onmouseout 鼠标移出元素边界触发

2.3事件函数：

2.3.1 操作非表单元素的属性

例如：href、title、id、src等
调用方式：元素对象打点调用属性名，obj.herf
属性名和关键字、保留字冲突的更换写法
calss ——>className for——>htmlFor rowspan——rowSpan
属性赋值：给元素数组赋字符串类型的值 (id值无法更改)
pic.src = "images/a.jpg"
在事件函数内部有一个this ，指向事件源

总结：不同函数内部this指向
普通函数中this指向window对象；构造函数中this指向生成的实例对象；对象的方法中的this指向对象本身；事件函数中的this指向事件源。
执行上下文分为：全局执行上下文、函数执行上下文、eval执行上下文，所以对应的this也由三种。

取消点击a标签以后的跳转在点击事件添加return false

2.3.2获取标签内部内容

innerHTNL属性，获取标签内部内容中包含标签，获取的内容包括空白换行等。更改标签的内容时，有标签的字符串会按照HTML语法中的标签加载。
box.innerHTML = "<h2>hello JS </h2>" //按照html格式加载
innerText，获取标签内部如果包含标签，获取的内容会去掉换行和缩进等空白。更改有标签内容时，标签按照普通字符加载
box.innerText = "<h2>hello JS </h2>" //按照普通字符格式加载
场景选择
innerText在设置纯字符串时使用；（性能较好）
innerHTML在设置有内部子标签结构使用；

2.3.3 操作表单元素属性

value 用于大部分表单元素的内容获取（option是数组）
type 获取input标签的类型（输入框或者复写框）
disabled 禁用属性
btn.disabled = true;//设置为true不可编辑
checked 复选框选中属性
selected 下拉菜单选中属性

获得焦点onfocus，失去焦点onblur，点击onclick
全选反选案例

2.3.4 自定义属性操作

getAttribute(name) 获取标签行内属性的方法
setAttribute(name , value)设置标签行内属性方法
以上两种方法也可以调用提前封装好的属性如id，class。
btn.setAttribute("class","demo")//无需写成className
removeAttribute(name); 删除属性

2.3.5 操作style样式属性

使用style属性方式设置的样式显示在标签行内。
element.sytle 是行内样式组成的样式对象。
background-color更需要改写为驼峰法backgroundColor
通过样式设置宽高需要加单位。
document.body.style.backgroundColor = "black"
调用body属性可以直接调用

3.节点

DOM树中操作HTML节点
添加/移除 document.body.appendChild/remove();

3.1 节点属性

nodeYtpe 只读 1.元素节点 2.属性节点 3.文本节点
nodeName 节点名称（标签名称），只读
nodeValue 元素节点的nodeValue始终是null

父子节点常用属性

childNodes 只读，获取一个节点所有子节点的实时的集合，动态变化
children 只读，返回一个节点的所有子节点的集合
firstChild/lastChild 只度，返回第一个/最后一个子节点
parentNode 返回一个当前节点的父节点
parentElement 返回当前节点的父元素节点

兄弟节点属性
nextSibling 只读属性，返回与该节点同级的下一个节点
previousSibling 只读属性，返回该节点同级的上一个节点
nextElementSibling 只读属性，返回节点同级的下一个元素节点
previousElementSibling 只读属性，返回与该节点同级的上一个元素节点

3.2 创建新节点

document.createElement(“div”) 创建元素节点
document.createAttribute() 创建属性节点
document.createTextNode() 创建文本节点
一般将创建的新节点存在变量中

3.3 节点常用操作方法

parentNode.appendChild(child)将一个节点添加到指定父节点的子节点的末尾
parentNode.replaceChild(newChild,oldChild)用指定节点替换当前节点，返回替换的节点
parentNode.insertBefor(newNode,referenceNode);在参考节点前插如拥有父节点的子节点，referNode为null默认插入到子节点末尾
parentNode.removeChild(child);移除当前节点的一个子节点
.cloneNode(true/false)深/浅度克隆深度节点的后代节点也会被克隆。克隆时标签上的属性和属性值也会被复制，写在标签行内的绑定事件可以被复制，但是通过JavaScript动态绑定的事件不会被复制。
Node.hasChildNodes();没有参数，返回Bolean表示该元素是否包含子节点。//不区分节点类型
Node.contains(child):返回一个Bolean表示传入节点是否为该节点的后代（不局限父子关系）

二.DOM事件

1.注册事件

element.addEventListener()方法（不支持IE9以下浏览器）
参数1.事件类型的字符串（直接书写“click”，不需要加on）
参数2. 事件函数
参数3.为true时事件捕获否则事件冒泡
同一个元素可以多次绑带事件监听。
* element.attachEvent()方法(只支持IE10以下)
参数：事件类型的字符串（需要加on），事件函数
同一个元素的可以多次绑定事件监听，同一事件类型可以注册多个事件函数。

2.移除事件

element.removeEvenListener()方法（不支持IE9 以下）
参数：事件类型的字符串，事件函数引用名
没有办法移除一个匿名函数
移除匿名函数时，将绑定的事件方法设为空
btn.onclick = null ;
element.detachEvent()方法（仅支持IE10以下）
参数：事件类型的字符串（需要加on），事件函数
无法移除一个匿名函数。

3.兼容移除函数

自定义一个兼容函数的解除绑定事件的函数
参数：事件源，事件类型，事件函数

4.事件流

祖先级元素和本元素同时设置了事件，事件发生顺序按照冒泡顺序执行。

事件流的三个阶段
事件捕获，事件执行，事件冒泡

addEventListener()第三个参数为true只事件捕获,flase只冒泡
onclick、 attachEvent只能事件冒泡

事件委托：利用事件冒泡，将子级事件委托给父级加载
e.target属性记录了真正触发事件的事件源
事件对象常用属性

e.eventPhase 查看事件触发时所处阶段
e.target 用对象事件的元素
e.srcElemtnt 用于获取触发事件元素（低版本浏览器）
e.currentTarget 获取绑定事件的事件源元素
e.type 获取事件类型
e.clientX/e.clientY 鼠标距离浏览器左上角窗口的距离
e.pageX/e.pageY 鼠标距离整个html页面左上角的距离

取消默认行为和阻止事件传播的方式

e.preventDefault() 取消默认行为
e.returnValue 取消默认行为（低版本浏览器）
e.stopPropagation() 阻止冒泡，标准方式
e.cancelBubble = true; 阻止冒泡，低版本IE
[MDN参考] (https://developer.mozilla.org/zh-CN/docs/Web/Events)

三.DOM特效

1.偏移量属性

在这里插入图片描述

offestParent 参考父级，距离自己最近的有定位的父级，或body
offestLeft/offsetTop 偏移位置
offsetWidth/offsetHeight 偏移大小

2.客户端大小

在这里插入图片描述

client 系列没有参考父级元素
clientLeft/clientTop 边框区域尺寸
clientWidth/clientHeight 边框内部大小

3.滚动偏移属性

在这里插入图片描述

scrollLeft/scrollTop 滚动出去的尺寸
scrollWidth/scrollHeight 盒子内容的宽度和高度

四、BOM

浏览器对象模型（BOM）提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，Window对象是BOM的顶层对象。调用Window下的属性和方法时，可以省略window，Window.name已经存在且为字符串类型； Window.top只读。alert(),prompt(),confirm()均是Window的属性

4.1.加载事件

4.1.1 onload事件

图片的加载较css，html，js慢，JS在获取图片宽高等信息时图片还未加载完成会导致获取的宽高值无效，所以必须等待加载完成以后获取才有意义。onload事件在加载结束就会自动触发。
window加载完毕指的是所有HTML和引用的外部资源（CSS、JS、img、视频）都加载完毕
onload是window的一个属性，一个页面只能有一次onload事件，否则会替换

4.1.2延时器（window对象的一个方法）异步语句

运行环境提供的API是以同步或者异步
window.setTimeout(func,time);(一段时间后执行函数)
func：延时执行的函数。可以是匿名函数或一个函数名的引用
time：延时的时间，毫秒为单位

window.setTimeout(funtion () {
    cosole.log(1);
},2000);

4.1.3清除延时器

window.clearTimeout(timeout)
timeout:指定延时器变量引用名
延时器需要存入到一个变量中，便于后期清除

4.1.4定时器异步语句

定时器是window对象的方法，每个固定时间执行一次
window.setInterval(func,interval):
func:每次执行的函数，可以是匿名函数或者是函数名的引用
interval：时间间隔

var timer = window.setInterval(function() {
    console.log(1);
},2000);
window.clearInterval(timer) //清除定时器

window.getComputedStyle(box);//获取最终页面显示的尺寸

JsAPIs

一、DOM

1.获取元素

1.1 根据id获取元素

1.2根据标签名获取元素

1.3根据元素对象内部获取元素方法

1.4根据name获取元素（由于IE不兼容不推荐）

1.5根据类名获取元素

1.6 根据选择器获取元素

2.事件

2.1事件源：绑定事件

2.2事件类型：

2.3事件函数：

2.3.1 操作非表单元素的属性

2.3.2获取标签内部内容

2.3.3 操作表单元素属性

2.3.4 自定义属性操作

2.3.5 操作style样式属性

3.节点

3.1 节点属性

3.2 创建新节点

3.3 节点常用操作方法

二.DOM事件

1.注册事件

2.移除事件

3.兼容移除函数

4.事件流

三.DOM特效

1.偏移量属性

2.客户端大小

3.滚动偏移属性

四、BOM

4.1.加载事件

4.1.1 onload事件

4.1.2延时器（window对象的一个方法）异步语句

4.1.3清除延时器

4.1.4定时器 异步语句

4.1.4定时器异步语句