JavaScript
DOM
DOM - document object mode(文档对象模型)
js中自带一个对象叫document,这个对象指向整个网页内容部分
document常用方法:
1) 操作标签 - 标签的增删改查
查 - 获取标签(节点)
直接获取标签
document.getElementById(id值) - 获取指定id对应的标签,返回一个标签对象
document.getElementsByClassName(class值) - 获取class值是指定值的标签,返回一个容器
document.getElementsByName(name值) - 获取name值是指定值的标签,返回一个容器
document.getElementsByTagName(标签名) - 获取标签名是指定值的标签,返回一个容器
间接获取标签
获取子标签:
获取所有的子节点: 标签对象.children - 返回一个容器由多个标签对象组成
获取第一个子节点: 父节点.firstElementChild
获取最后一个子节点: 父节点.lastElementChild
获取父标签:标签对象.parentElementchildren - 返回一个标签对象
获取兄弟标签:标签对象.nextElementSibling - 返回一个容器
创建和添加(节点)标签
创建节点(标签):document.createElement(标签名)
添加节点(标签):
父节点.appendChild(标签) - 添加到父节点(标签)里面的最后
父节点.insertBefore(标签,节点1) - 添加到父节点(标签)里面节点1的前面
删除(节点)标签
节点(标签).remove()
父节点.removeChild(子节点)
拷贝(节点)标签
节点.cloneNode()
节点.cloneNode(true)
替换(节点)标签
父节点.replaceChild(新节点, 子节点)
2) 操作标签内容
获取标签(节点)内容
节点.innerText
节点.innerHTML
标签属性
一般属性操作:节点.属性名=属性值
样式属性:
操作单个属性:节点.style.属性名=属性值(js取消了属性名中的"-“改为”-"后的首字母大写)
操作该节点的所有属性:节点.style=样式
BOM
BOM(browser object mode) - 浏览器对象模型
js中自带一个window,指向浏览器。在js代码中定义的所有的全局变量都是添加到window对象中的属性
一般情况下,使用window中的属性和方法的时候, window可以省略
1.window基本操作
打开新窗口:
window.open(网页地址)
window.open(‘网页地址’,’’,‘width=宽度,height=高度’)
关闭窗口: window.close() /窗口对象.close()
移动当前窗口: 窗口对象.moveTo(x坐标, y坐标)
获取浏览器的宽度和高度: window.innerWidth, window.innerHeight / window.outerWidth, window.outerHeight
2.弹框
alert(提示信息) - 弹出提示信息(带确定按钮)
confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值,取消-false, 确定-true
prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消,确定按钮的提示框; 点取消,返回值是null;点确定返回值是输入框中输入的内容
3.定时
间隔指定时间重复执行指定操作
setInterval(操作,时间间隔) - 操作是函数,时间间隔的单位是毫秒
关闭计时器:clearInterval(定时对象)
到了指定时间只操作一次
setTimeout(操作,时间间隔) - 操作是函数,时间间隔的单位是毫秒
关闭计时器:clearTimeout(定时对象)
事件
1.事件绑定
a. 在标签内部给事件源的事件属性赋值
b. 通过节点绑定事件1: 标签节点.事件属性 = 函数
c. 通过节点绑定事件2: 标签节点.事件属性 = 匿名函数
d. 通过节点绑定事件3: 节点.addEventListener(事件名,函数)
事件名 - 必须去掉on
2.常见事件类型
a…onload - 页面加载完成对应的事件(标签加载成功)
b.鼠标事件:
onclick(鼠标单击)
onmouseover(鼠标在标签上)
onmouseout(鼠标离开标签)
c.键盘事件:
onkeypress
onkeydown(按下键盘按键)
onkeyup
输入框输入状态结束:onchange
3.事件捕获
事件对象.stopPropagation()
js读取json文件
$.get("js/user.json",function(res){
console.log(res);
})
要使用$.get必须先导入jquery
<script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script>