Javascript
一、Document Object Model(DOM)
1、Element 元素节点
a.获取元素节点
// 通过id获取元素节点
document.getElementById()
// 通过class获取元素节点,获取到的是集合或者是数组
document.getElementsByClassName()
// 通过name属性获取元素节点，获取到的是集合或者是数组
document.getElementsByName()
// 通过标签元素获取节点
document.getElementsByTagName()
// 通过querySelector获取元素节点；querySelector获取单个精确的节点，querySelectorAll获取到的是集合
document.querySelector()
document.querySelectorAll()
// 获取标题、body元素
document.title
document.body
// 获取所有的子节点
ele.childNodes
// 获取第几个子节点
ele.children[0]
// 获取第一个子节点
ele.firstElementChild
// 获取最后一个子节点
ele.lastElementChild
// 获取当前ele节点的父节点
ele.parentNode
// 获取ele节点的父节点，从body元素往下的所有父节点
ele.offsetParent
// 获取上一个兄弟节点
ele.previousElementSibling
// 获取下一个兄弟节点
ele.nextElementSibling
// 统计元素节点个数（不包括文本节点和注释）
ele.childElementCount
b.创建元素节点
// 创建元素(标签)
document.createElement('tagName')
// 创建文本元素
document.createTextNode('textName')
//创建好元素，还要把元素添加到文档里，才能显示出来；
c.添加、插入、替换元素
// 添加元素
ele.appendChild(newNodeName)
// 插入元素(在已经有的节点前插入一个新的节点)
ele.insertBefore(newNodeName,nodeName)
ele.insertAdjacentHTML()
// 替换元素
ele.replaceChild(newNode,oldNode)
// 复制元素(true表示复制该节点下的所有子节点；false表示只复制该节点)
ele.cloneNode(false)
ele.cloneNode.nodeName
ele.cloneNode.nodeType
// 删除节点
ele.removeChild(node)
d.className、classList属性和Attribute方法对类的操作
1.className属性
ele.classNme
ele.className += classname
2.classList属性
ele.classList是一个只读的属性，返回的是一个集合。
添加class(可以添加一个或者多个)
ele.classList.add('classname1','classname2')
删除class(可以删除一个或者多个)
ele.classList.remove('classname1'，'classname2')
替换class
ele.classList.replace('oldclass','newclass')
检查clas是否存在(检查元素的类属性中是否存在指定的类，其返回值为true或者false)
ele.classList.contains('className')
查询(通过索引)
ele.classList.item(1)
和jquery的toggle切换一样,非常好用
ele.classList.toggle('classname')
3.Attribute()方法对类的操作
新增添加指定的属性
ele.setAttibute('attr','value')
获取指定的属性,不存在为null
ele.getAttibute('attr')
删除指定的属性
ele.removeAttibute(name)
删除指定的 Attr 对象
ele.removeAttributeNode()
e.获取节点的位置(相对位置、绝对位置)、宽度、高度、偏移、滚动距离
| 参数 | 描述 |
|---|---|
| clientX | 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条 |
| clientY | 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条 |
| pageX | 是指鼠标事件在浏览器整个页面中（包括滚动部分）的中的x坐标位置 |
| pageY | 是指鼠标事件在浏览器整个页面中（包括滚动部分）的中的y坐标位置 |
| screenX | 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标 |
| screenY | 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标 |
| offsetX | 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标 |
| offsetY | 设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标 |
| scrollX | |
| scrollY | |
| x | 设置或获取鼠标指针位置相对于父文档的 x 像素坐标 |
| y | 设置或获取鼠标指针位置相对于父文档的 y 像素坐标 |
1.获取可视区宽高：
const clientX = window.innerWidth;
const clientY = window.innerHeight;
const clientX = document.documentElement.clientWidth;
const clientY = document.documentElement.clientHeight;
2.屏幕宽高：
const screenX = window.screen.width;
const screenY = window.screen,height
3.获取文档宽高：
const clientX = document.body.clientWidth;
const clientY = document.body.clientHeight;
document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollWidth（如果内容宽度超过一屏，得到文档宽度；如果内容小于一屏，得到一屏的宽度）
document.body.scrollHeight （如果内容高度超过一屏，得到文档高度；如果内容小于一屏，得到一屏的高度）
4.获取滚动条距离：
document.body.scrollTop
document.body.scrollLeft
window.scrollY
window.scrollX
document.documentElement.scrollTop
document.documentElement.scrollLeft
window.pageYOffset
window.pageXOffset
5.坐标，获取元素位置的快速方法
要移动页面的元素，需要获取其坐标。在Javascript中坐标系大体分为两种：
相对于窗体（clientX，clientY）
从窗口的顶部/左侧边缘计算得出
相当于文档（pageX，pageY）
与文档根（document root）中的 position:absolute 类似，从文档的顶部/左侧边缘计算得出。
6.元素坐标：getBoundingClientRect
getBoundingClientRect()方法,包含了left、right、top、bottom四个属性,别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离.
getBoundingClientRect()
相对位置：
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
绝对位置：
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标
ele.offsetTop
ele.offsetLeft
2、遍 历
Array traversal 数组遍历
- forEach()
- map()
- for循环遍历
- for…in
- for…of(es6)
- some()
- every()
- filter()
Object traversal 对象遍历
- for…in
- Obeject.keys()
- Object.getOwnPropertyNames()
- Reflect.ownKeys()
- _.keys
3、事件
在js中触发事件有两种方式，一种是在标签元素上直接写入事件,这种写法不符合W3C的规范标准；另一种方式是用id或者class绑定在元素上，去触发发生事件。
element.onclick = function(){}
element.addEventListener('事件类型',function(){},false/true)
<!-- 在标签内直接写入触发事件 -->
<button type="button" onclick="alert('this is an event')">点击我</button>
<!-- 用js触发事件 -->
<button type="button" id="btn">按钮</button>
// 通id获取按钮节点
const btn = document.getElementById('btn');
// 第一种
btn.onclick = function(){
alert('111')
}
// 第二种，通过addEventListener去监听
btn.addEventListener('click',function(e){
alert('111')
},false)
事件冒泡：从当前元素节点触发的事件，事件会向上逐渐往父节点影响，一级一级的往上，直到根元素节点。
事件捕获：从当前元素节点触发事件，事件会向下往子节点影响，一级一级的往下，直到最里的子元素节点。
Mouse Events 鼠标事件
按鼠标的动作可以分为：
- 鼠标的移上，鼠标移出
- 鼠标按下，鼠标松开(释放)
- 鼠标点击，鼠标双击
- 鼠标的移动，鼠标拖拽
| 事件方法 | 描述 | |
|---|---|---|
| onmouseover | 鼠标移至 HTML 元素上方时触发函数 | |
| onmouseout | 鼠标移出元素时触发函数 | |
| onmousedown | 鼠标按下时触发函数 | |
| onmouseup | 鼠标释放时触发函数 | |
| onclick | 完成鼠标点击时会触发函数 | |
| ondbclick | 双击鼠标时会触发函数 | |
| onmousemove | 双击拖拽 |
Keyboard Events 键盘事件
Form Events 表单事件
表单有input、textarea、select、reset、submit、change事件
提交表单时，为了防止表单重复提交，我们要禁用默认提交:
e.preventDefault()
数据
e.data
文本内容
e.target.value
<!-- 表单-->
<form action="/" method="post" id="formExample">
<input type="text" name="account" />
<input type="tel" name="tel" />
<select name="template1">
<option value="0">全部</option>
<option value="1">部门</option>
<option value="2">水池</option>
<option value="3">配送</option>
</select>
<textarea name="desc"></textarea>
<input type="submit" id="submitBtn" value="提交" />
</form>
<script>
const submitBtn = document.getElementById('submitBtn')
submitBtn.addEventListener('submit',function(e){
e.preventDefault()
// do...
})
</script>
Browser(HTML) Events 浏览器(HTML)事件
- 加载页面或者窗口
- 离开页面或者窗口
- 注销页面或者窗口
二、Browser Object Model(BOM)
BOM提供了一组访问窗口对象的一些方法，例如：移动窗口位置，改变窗口大小，打开窗口与关闭窗口，弹出对话框，进行导航以及获取客户的一些信息，如浏览器的品牌版本，屏幕分辨率。BOM最强大的功能是它提供了一个访问HTML页面的入口：document 对象，通过document 对象入口可以使用DOM的强大功能。
- BOM 提供了独立于内容而与浏览器窗口进行交互的对象。
- BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是Window
- BOM由一系列相关的对象组成，每一个对象都提供了很多方法和属性
- Window是BOM的顶级对象，所有的对象都是由Window延伸出来的，BOM也可以称为window的子对象
| BOM对象 | 描述 |
|---|---|
| window | 表示浏览器实例 |
| location | 加载文档的信息和常用导航功能实例 |
| navigator | 客户端标识和信息的对象实例 |
| screen | 客户端显示器信息 |
| history | 导航历史记录 |
1.Window 浏览器窗口对象
所有浏览器都支持 window 对象。它表示浏览器窗口
Window是javascript的全局对象
浏览器窗口的内部高度(包括滚动条)
window.innerHeight
浏览器窗口的内部宽度(包括滚动条)
window.innerWidth
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
2.Screen 屏幕对象
用户屏幕的信息,通过screen可以来判断页面的布局以及其他信息
屏幕宽度
screen.Width
屏幕高度
screen.Height
可用的屏幕宽度
screen.availWidth
可用的屏幕高度
screen.availHeigh
颜色深度
screen.colorDepth
颜色分辨率
screen.pixelDepth
3.Location 对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web协议（http: 或 https:）
location.href 属性返回当前页面的 URL
location.assign() 方法加载新的文档。
4.History 对象
history.back() -后退
history.forward() -向前
history.go(n) --可前进 1，可后退 -1,刷新0
<input type="button" value="Back" onclick="goBack()">
<input type="button" value="Forward" onclick="goForward()">
<script>
function goBack()
{
window.history.back()
}
function goForward()
{
window.history.forward()
}
</script>
5.Navigator 对象
window.navigator 对象包含有关访问者浏览器的信息
返回浏览器的代码名
navigator.appCodeName
返回浏览器的名称
navigator.appName
返回浏览器的平台和版本信息
navigator.appVersion
返回指明浏览器中是否启用 cookie 的布尔值
navigator.cookieEnabled
返回运行浏览器的操作系统平台
navigator.platform
返回由客户机发送服务器的user-agent 头部的值
navigator.userAgent
6.弹窗
在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
window.alert();
window.confirm(“sometext”);
window.prompt(“sometext”,“defaultvalue”);
7.计时器
JavaScript 计时事件:
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码
- setTimeout() - 在指定的毫秒数后执行指定代码
- clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
- clearsetTimeout() 方法用于停止 setTimeout() 方法执行的函数代码
window.setInterval("javascript function",milliseconds);
setTimeout(function(){alert("Hello")},3000);
8.Cookie
Cookie 用于存储 web 页面的用户信息
Cookie 是一些数据, 存储于你电脑上的文本文件中
javaScript 中，创建 cookie
document.cookie="username=John Doe";
javaScript 中，读取 Cookie
var x = document.cookie;
三、Regex 正则表达式
正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。
1.创建正则表达式
第一种方式，正则表达式通常是用正斜线（/）将模式括起来，以字面量方式创建正则表达式
const regexExample01 = /a+b/g
第二种方式，以**RegExp()**构造函数方式创建正则表达式
const regexExample02 = RegExp("a+b","g")
2.正则表达式标志
| 标志 | 描述 | 对应属性 |
|---|---|---|
| d | 生成子串匹配的索引。 | hasIndices |
| g | 全局查找。 | global |
| i | 忽略大小写查找。 | ignoreCase |
| m | 允许 ^ 和 $ 匹配换行符。 multiline | |
| s | 允许 . 匹配换行符。 | dotAll |
| u | “Unicode”；将模式视为 Unicode 码位序列。 | unicode |
| v | 升级 u 模式，提供更多 Unicode 码特性。 | unicodeSets (en-US) |
| y | 执行“粘性（sticky）”搜索，从目标字符串的当前位置开始匹配。 | sticky |
四、节点元素、属性、方法词语
html结构节点元素
| 名称 | 说明 | 示例 |
|---|---|---|
| Node | 节点 | |
| Window | 窗口 | |
| Document | 文档 | |
| Element | 元素 |
element的属性
| Element属性 | 说明 | 示例 |
|---|---|---|
| attributes | 属性;返回一个与该元素相关的所有属性集合 | element.attributes |
| classList | 返回节点的class属性 | element.classList |
| className | 返回节点的class | element.className |
| clientWidth、clientHeight、clientLeft、clientRight、clientTop | 返回节点的外层元素的宽度 | element.clientWidth |
| id | 返回元素的id | element.id |
| innerHTML | 返回元素的内容文本 | element.innerHTML |
| localName | 元素的内容文本 | element.localName |
| outerHTML | 获取该 DOM 元素及其后代的 HTML 文本 | Element.outerHTML |
| prefix | 元素前缀 | element.prefix |
| scrollHeight | 元素的滚动视图高度 | Element.scrollHeight |
| scrollLeft | 元素横向滚动条距离最左的位移 | element.scrollLeft |
| scrollTop | 元素纵向滚动条距离 | element.scrollTop |
| scrollWidth | 元素的滚动视图宽度 | element.scrollWidth |
| solt | 插槽 | element.slot |
| tagName | 标签名称 | element.tagName |
| Element事件方法 | 说明 |
|---|---|
| elementTarget.addEventLisener() | 监听事件 |
| Element.attachShadow() | 监听事件 |
| Element.animate() | 监听事件 |
| Element.animate() | 监听事件 |
| Element.computedStyleMap() | 监听事件 |
| EventTarget.dispatchEvent() | 监听事件 |
| Element.getAnimations() | 监听事件 |
| element.getAttribute() | 获取属性 |
| Element.getAttributeNames() | 获取属性名称 |
| Element.hasAttribute() | 监听事件 |
| Element.scroll() | 监听事件 |
| Element.hasAttributes() | 监听事件 |
| Element.hasAttributes() | 监听事件 |
| Element.hasAttributes() | 监听事件 |
| Element.hasAttributes() | 监听事件 |
| Element属性 | 说明 | 示例 |
|---|---|---|
| nodeType | 节点类型 | element.nodeType |
| nodeName | 节点名称 | element.nodeName |
| nodeValue | 节点属性值 | element.nodeValue |
| NodeList | 节点集合 | element.nodeList |
| childNodes | 获取所有子元素的节点集合，返回所有的节点，包括文本节点、注释节点 | element.childNodes |
| children | 返回元素的子元素的集合,只返回的是元素节点 | element.children |
| EventTarget | 事件对象 | element.EventTarget |
| attributes | 属性 | element.getAttribute |
| classList | 返回节点的class属性 | element.classList |
| className | 返回节点的class | element.className |
| clientWidth、clientHeight、clientLeft、clientRight、clientTop | 返回节点的外层元素的宽度 | element.clientWidth |
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
