WAPls. NO1

本文详细介绍了JavaScript中的API,包括DOM操作、事件处理、节点操作等。通过getElementById、getElementsByTagName等方法获取页面元素,使用innerText与innerHTML区别,以及排他思想在样式修改中的应用。此外,还讲解了如何创建、添加、复制和替换节点,并探讨了自定义属性和节点的父级、子级及兄弟节点的获取方法。
摘要由CSDN通过智能技术生成

API

API是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或者某硬件得以访问一组历程的能力。又无需访问源码。
通俗来讲:AIP是给程序员提供的一种工具,以便能轻松的实现想要实现的功能
Web API是浏览器提供的一套操作浏览功能和页面元素的API。

DOM

文档对象模型—简称DOM。是HTML的标准编程接口。
如何获取页面元素
根据ID获取

使用getElementByld()

使用console.dir() 可以查看对象里面的属性和方法。
根据标签名获取

document.getElementsByTagName(‘标签名’);

得到的是一个对象的集合,我们想操作里面的方法就需要遍历。
得到的元素对象是动态的。

通过HTML新增方法获取

document.getElementByClssName();//根据类名返回元素对象集合

document.querySelector(‘选择器’) //根据指定选择器返回第一个元素对象

document.querySelectorAll('选择器’) //根据指定选择器返回

特殊元素获取
获取Body元素
document.body //获取body元素对象

常见鼠标事件
在这里插入图片描述
innerText与innerHtml的区别
innerText不识别标签和空格
innerHtml识别标签

排他思想
利用排他思想在JS中改变元素的样式,需要先干掉其他的样式,在添加进入想要的样式

自定义属性

获取属性值:
element.属性 获取的是元素本身自带的属性。
element.getAttribute(‘属性’) 获取的是程序员自定义的属性

设置属性值:
elment.属性 = ‘值’
element.getAttribute(‘属性’,‘值’)

移除属性值
element.removeAttribute(‘属性’)

节点操作

节点概述:
一般来说,节点至少拥有nodeType(节点类型),nodeName(节点名称),nodeValue(节点值)。三个基本属性

父级节点
node.parentNode
返回最近的一个父节点,如果没有父节点则返回null

子节点
parentNode.childNodes
返回包含指定节点的子节点的集合,该集合为即时更新的集合
返回的是所有的子节点,如果要使用子节点,则需要进行处理,一般不推荐使用这种方法。

parentNode.children
这是一个只读属性,返回所有的子元素节点。它只返回元素节点,其余节点不返回

第一个子节点的获取方法:
parentNode.children[0]
最后一个子节点的获取方法:
parentNode.childeren[parentNode.childeren.length - 1];

兄弟节点的获取方法:
node.nextsibling
返回当前元素的下一个节点,包括所有元素
node.nextElementsibling:
返回当前元素的下一个兄弟节点,不包括所有元素

node.previousbling
返回当前元素的上一个节点,包括所有元素
node.previouElementsbling
返回当前元素的上一个兄弟节点,不包括所有元素

创建节点
document.creatElement(‘tagName’)
document.creatElement()方法是创建HTML元素,因为这些元素原先不存在,所以我们称之为动态创建节点。

添加节点
node.appendChild(child)
添加到指定父节点的最后。

node.insertBefore(child,指定元素)
添加到指定父节点指定的一个节点的前面。

复制节点
node.cloneNode()
如果括号里面为空,只复制节点本身,不包括里面的子节点
如果空号里面是true 会复制节点本身和里面所有的子节点。

替换节点
parenNode.replacechild(newChild,oldchild)
用一个指定的节点替换当前节点的一个子节点。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值