【JS API 的知识点】

红色波浪号

于 2022-10-30 13:15:51 发布

阅读量150

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_72815229/article/details/127598460

版权

webAPI笔记

**webAPI：**是浏览器提供的一套操作浏览器功能和页面元素的api

**API的组成：**Applacation poraramming Interface 应用程序，编程，接口

**DOM的组成：**文档：一个网页

元素：标签

属性：标签属性

节点：页面中的所有内容（标签，属性，注释，文本，document）

**DOM的顶级对象: **document

BOM的顶级对象： window

**伪数组：**拥有索引，长度length，可以循环遍历，但是不能用数组中专有的方法

**获取元素的方式：**1.通过ID名获取：var 变量名 = document.getElementById('Id名')

2.通过class类名获取：var 变量名 = document.getElementsByClassName('类名')

3.通过标签名获取：var 变量名 = document.getElementsByTagName('标签名')

4.通过name名获取：var 变量名 = document.getElementsByName('name名')

5.通过querselector获取：var 变量名 = document.querySelector（'选择器名'）

6.通过querselectorAll获取：var 变量名 = document.querySelectorAll（'选择器名'）

**事件：**触发–>响应事件是异步的 this在事件函数中指向的是事件源

**事件的三要素：**事件源：被触发的元素

事件类型：事件的触发的方式（鼠标事件，键盘事件，浏览器事件）

事件处理程序：事件触发后执行的代码（以函数的形式返回）

绑定事件： 先获取元素事件源.事件类型=事件处理程序

**事件的写法：**行内书写，外部书写，内部书写

**浏览器完成（在外部书写的时候需要写）：**window.οnlοad=function

console.dir打印元素结构

**innerText textContent：**获取或设置文本节点：变量名.innerText

**innerHTML：**获取或设置所有节点：变量名.innerHTML

**非表单元素的操作：**1.改变本身元素：比如宽高等

2.通过style：名字.style.样式在js中设置样式，如果css样式是连接符-链接的要把连接符掉

第二个单词首字母大写

3、通过class操作：

                               console.log(img.src);
                               console.log(img.alt);
                               console.log(img.className);
                            // 在js中想要获取class属性，通过                                    className获取  弊端：覆盖掉原来的                                属性
                               img.className = 'img'
                            }
                            hideBtn.onclick = function () {
                                   console.log('测试');
                                    // 1、
                             // img.style.display = 'none'
                                    // 2、
                             img.style.visibility = 'hidden'

                        }

鼠标事件：ondblclick双击事件，onmouseover鼠标移入事件，

onmouseout鼠标移出事件，onmouseenter鼠标进入事件

onmouseleave鼠标离开事件，onmousedown鼠标按下事件

onmouseup鼠标抬起事件，onmousemove鼠标移入事件

onclick单击事件

onfocus获取焦点，onblur失去焦点

键盘事件：onkeydown键盘按下事件，onkeyup键盘抬起事件

浏览器事件：window.onscroll = function ()浏览器滚动事件

事件源.onscroll = function ()DOM滚动事件

取消事件：事件源.事件类型=null

监听事件：``事件源.addEvetListener（事件类型（不需要加on），回调函数（自己起名，如果不用删除，写`

function也可以））

取消监听事件：事件源.removeEvetListener（事件类型，回调函数）

**事件对象：**任何事件都有事件对象event，回调函数的第一个参数也是事件对象

浏览器的兼容：var 变量名 = event || window.event 要使用event必须设置兼容

**鼠标：**事件类型：event.type

元素的id：target.id

距离浏览器顶部和左侧的距离横纵坐标：clientX clientY pageX pageY

不包括浏览器卷去的宽度和高度： clientX clientY

包括浏览器卷去的宽度和高度：pageX pageY

**键盘：**键名：key event.key

键码：keyCode event.keyCode

冒泡事件：onmouseover支持冒泡，onmouseenter不支持冒泡

阻止冒泡：event.stopPropagation()

按钮的禁用：disabled=true

按钮的启用：disabled=false

**默认事件：**a链接的跳转，form表单的提交

阻止默认事件：event.PreventDefault()

获取元素属性的方法：getAttribute('属性名')

设置元素属性的方法：setAttribute('属性名'，'属性值')

删除元素属性的方法：removeAttribute('属性名')

获取元素属性的节点：getAttributeNode('属性名')

元素的样式设置：对象.style：对象.style.backgroundColor = 'red'

对象.className：对象.className = 'head'

对象.setAttribute（'style'）：对象.setAttribute('style','background-color:red')

对象.setAttribute('class')：对象.setAttribute('class', 'head')

对象.style.setProperty('css的属性名'，'css属性值')：对象.style.setProperty('background-color', 'red')

对象.style.cssText：对象.style.cssText = 'background-color:red;height:200px;'

节点的特征： 节点的类型：nodeType

节点的名称：nodeName

节点的值：nodeValue

 一、document
        nodeType: 9
        nodeName: #document
        nodeValue: null
    二、标签 （元素）
        nodeType: 1
        nodeName: 大写的标签名
        nodeVale: null
    三、属性
        nodeType: 2
        nodeName: 属性名
        nodeValue: 属性值
    四、文本 
        nodeType: 3
        nodeName: #text
        nodeValue: 文本内容

节点之间的关系：

//节点之间的关系

//父节点 parentNode

console.log(li3.parentNode);

//父元素节点 parentElement

console.log(li3.parentElement);

// 相同点：都是父元素

// 不同点：parentNode html 的父元素是 #document

// parentElement html的父元素是 null

// 子节点 childNodes 子元素标签文本节点注释节点

console.log(list.childNodes);

// 子元素节点子元素标签

console.log(list.children);

// 第一个字节点 firstChid 文本节点

console.log(list.firstChild);

//第一个子元素节点 firstElementChild 元素节点

console.log(list.firstElementChild);

// 最后一个子节点 lastChild 文本节点

console.log(list.lastChild);

//最后一个子元素节点 lastElementChlid 元素节点

console.log(list.lastElementChild);

//上一个子节点 previouSibling 文本节点

console.log(li3.previouSibling);

//上一个子元素节点 previousElementSibling 元素节点

console.log(li3.previousElementSibling);

//下一个子节点 nextSibling 文本节点

console.log(li3.nextSibling);

//下一个子元素节点 nextElementSibling 元素节点

console.log(li3.nextElementSibling);

// firstChild lastChild previousSibling nextSibling 获取的都是文本节点

// firstElementChild lastElementChild previousElementSibling nextElementSibling 获取的都是元素节点

创建元素的方式：

// 1、 document.write() 弊端：只能在body区域添加标签

document.write('<header>我是头部标签</header>')

document.write('<footer>我是底部标签</footer>')

// 2、innerHTML 弊端：覆盖原来的元素

var box = document.getElementById('box')

console.log(box);

// box.innerHTML = '<aside>侧边栏</aside>'

// box.innerHTML = '<nav>导航标签</nav>'

// 3、

/*

创建元素 document.createElement('标签名')

添加元素父元素.appendChild(创建的元素)

*/

var 变量名 = document.createElement('标签名')

box.appendChild(h1)

h1.setAttribute('class', 'h1')

h1.innerText = '我是标题标签'

// 删除元素父元素.removeChild()

box.removeChild(h1)

box.removeChild(document.getElementById('span1'))

BOM：

// BOM    // 方法：alert() onscroll() onload() prompt()    // 属性：全局的变量  console    // window.console.log(123);    /*    location 属性    */    console.log(window.location);    // hash：地址栏上#及后面的内容    console.log(window.location.hash);    // host：主机名及端口号    console.log(window.location.host);    // hostname：主机名    console.log(window.location.hostname);    // port :端口号    console.log(window.location.port);    // protocol：协议    console.log(window.location.protocol);    // href : 路径    console.log(window.location.href);
    document.getElementById('user').onkeyup = function () {        var event = event || window.event        if (event.keyCode == 13) {            // window.location.href = 'https://www.baidu.com'            // 重新加载页面  reload            window.location.reload()        }    }
    /*    history 属性      */    console.log(window.history);    // back  返回上一页
    function fn1() {        window.history.back()    }
    // forward 前进一页    function fn2() {        window.history.forward()    }

动画：

定时器：setInterval（'回调函数','时间间隔'）

setTimeout（回调函数，时间间隔）

var timer = setInterval(function ()

**清除定时器：**clearInterval（定时器名）

offset:

offsetHeight 本身的height + 上下的border + 上下的padding

offsetWidth 本身的width + 左右的border + 左右的padding

offsetLeft 父元素没有定位，相当于距离左侧浏览器的距离

父元素有定位，相当于距离父元素左侧的距离

offsetTop 父元素没有定位，相当于距离上侧浏览器的距离

父元素有定位，相当于距离父元素上侧的距离