• BOM(Browser Object Mode)
    浏览器对象模型
    js代码操作浏览器
  • DOM(Document Object Mode)
    文档对象模型
    js代码操作标签

BOM操作

window对象

window对象指代的就是浏览器窗口

  • window.innerHeight # 浏览器窗口的高度
    1267
  • window.innerWidth # 浏览器窗口的宽度
    981
  • window.open

window.open(‘https://www.mmzztt.com/’,”,’height=400px,width=400px,top=400px,left=400px‘); // 新建窗口打开,第二个页面写空即可,第三个参数写新建窗口的大小和位置

  • window.close # 关闭当前页面

window子对象之navigator

  • window.navigator.appName: 获取浏览器的名字
  • window.navigator.appVersion: 获取浏览器的版本
  • window.navigator.userAgent: 用来表示当前访问对象是否是一个浏览器
  • window.navigator.platform: 获取当前操作系统的平台信息

window子对象之history对象

window.history.back(); : 回退到上一页
window.history.forward(); : 前进到下一页

对应的就是浏览器左上方的两个箭头

window子对象之location对象

  • window.location.href; : 获取当前页面的URL
  • window.location.href = ‘https://mmzztt.com/‘; : 跳转到指定的URL
  • window.location.reload(); : 刷新页面,浏览器上方的小圆圈

DOM操作

DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。

HTML DOM树

image
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

DOM标准规定HTML文档中的每个成分都是一个节点(node):

  • 文档节点(document对象):代表整个文档
  • 元素节点(element 对象):代表一个元素(标签)
  • 文本节点(text对象):代表元素(标签)中的文本
  • 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
  • 注释是注释节点(comment对象)

属性是您能够获取或设置的值(就比如改变 HTML 元素的内容)。
方法是您能够完成的动作(比如添加或删除 HTML 元素)。

查找标签

用document起手

直接查找(掌握)

方法 描述
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素

当你用变量名指代标签对象的时候,一般情况下都推荐你书写成
xxxEle

  • divEle
  • PEle

例如:

// 找到ID为d1的标签,把它赋值为divEle
let divEle = document.getElementById('d1')

间接查找(熟悉)

方法 描述
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

兄弟标签指的是同级别标签

let divEle = document.getElementByID('d1')
// 获取ID为d1的父标签
divEle.parentElement
// 获取ID为d1的父标签的父标签(可以这样.下去,但是不建议这样做)
divEle.parentElement.parentElement
// 获取ID为d1的标签下所有的子元素
divEle.chlidren
// 后面我就不一一举例了,跟上面是同理的

节点操作

添加和删除元素

方法 描述
document.createElement(element) 创建 HTML 元素
somenode.removeChild(element) 删除 HTML 元素
somenode.appendChild(element) 在尾部追加 HTML 元素
somenode.insertBefore(newnode,某个节点) 把添加的节点放在某个节点的
somenode.replaceChild(newnode, 某个节点) 替换 HTML 元素
somenode.innerText = ‘要添加的文本内容’ 添加文本内容
somenode.innerText 查看标签内的文本内容
document.write(text) 写入 HTML 输出流
点击查看具体使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="d1">
		div
		<p id="p1">ppp</p>
	</div>
	<script>
		// 找到id为d1的标签
		let div_ele = document.getElementById('d1');
		// id为p1的标签
		let p_ele = document.getElementById('p1');
		// 创建一个img标签
		let img_ele = document.createElement('img');
		let a_ele = document.createElement('a');
		// 给刚刚新建的img标签添加src属性,如果添加的属性是标签默认的属性可以简写为img_ele.src = 'img/壁纸.jpg'
		img_ele.setAttribute('src','img/壁纸.jpg');
		a_ele.href = 'https://www.jd.com';
		// innerText可以改变标签的文本内容
		a_ele.innerText = '京东';
		// 在div_ele标签内追加刚刚新建的img标签
		div_ele.appendChild(img_ele);
		// 删除div_ele标签内的p_ele
		div_ele.removeChild(p_ele);
		// a_ele标签替换img_ele标签
		div_ele.replaceChild(a_ele,img_ele);
	</script>
</body>
</html>

改变HTML元素

方法 描述
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(key, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式

property表示样式,如background、font-size等等
注意:在css中写font-size,在js中要改成fontSize
实例:div_ele.style.background = ‘red’;
div_ele.style.fontSize = ‘200px’;

点击查看具体使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="d1">
		<a href="https://www.mmzztt.com" id="a1">美之图</a>
	</div>
	<script>
		// 查找标签
		let div_ele = document.getElementById('d1');
		let a_ele = document.getElementById('a1');
		// 把a标签的href属性改为'https://www.jd.com'
		a_ele.setAttribute('href','https://www.jd.com')
		// 改变div标签内的HTML代码,会识别''中的代码并运行
		div_ele.innerHTML = '<p id="1">ppp</p>'
		// 改变div标签的背景颜色
		div_ele.style.background = 'red'
	</script>
</body>
</html>

innerText与innerHTML

  • innerText改变的只是文本内容,就算里面写的HTML代码也不会识别,只会当不同文本显示
  • innerHTML会识别HTML代码并运行,替换掉里面的HTML

添加事件处理程序

方法 描述
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

查找HTML对象

方法 描述
document.anchors 返回拥有 name 属性的所有 <a> 元素
document.applets 返回所有 <applet> 元素(HTML5 不建议使用)
document.baseURI 返回文档的绝对基准 URI
document.body 返回<body> 元素
document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype
document.documentElement 返回 <html> 元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的 URI
document.domain 返回文档服务器的域名
document.embeds 返回所有 <embed> 元素
document.forms 返回所有 <form> 元素
document.head 返回 <head> 元素
document.images 返回所有 <img> 元素
document.implementation 返回 DOM 实现
document.inputEncoding 返回文档的编码(字符集)
document.lastModified 返回文档更新的日期和时间
document.links 返回拥有 href 属性的所有 <area><a> 元素
document.readyState 返回文档的(加载)状态
document.referrer 返回引用的 URI(链接文档)
document.scripts 返回所有 <script> 元素
document.strictErrorChecking 返回是否强制执行错误检查
document.title 返回 <title> 元素
document.URL 返回文档的完整 URL

获取值操作(form表单相关)

适用以下标签

  • .input
  • .select
  • .textarea

获取用户数据标签内部的数据

let inputEle = document.getElementById('d1');
inputEle.value;  // 获取用户在input框输入的内容
'liuhousheng'

let selectEle = document.getElementById('d2');
selectEle.value;  // 获取用户在select框选择的值
'3'

修改内容

let inputEle = document.getElementById('d1');
inputEle.value = 'liuhousheng'  // value后面加等号就是赋值
'liuhousheng'

获取用户上传的文件数据

let fileEle = document.getElementById('d3');
fileEle.value;  // 无法通过value直接获取文件数据
'C:\\fakepath\\关键字'

// 用files获取文件的数组对象
fileEle.files;  // 数组 [文件对象,文件对象1...]
FileList {0: File, length: 1}

fileEle.files[0];  // 获取文件数据
File {name: '关键字', lastModified: 1647268764869, lastModifiedDate: Mon Mar 14 2022 22:39:24 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 5354, …}

CSS操作、clss操作

CSS操作

JS操作CSS属性的规律:

  1. 对于没有中横线的CSS属性一般直接使用style.属性名即可。如:

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

  1. 对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

clss操作

  • className 获取所有样式类名(字符串)
  • classList 获取所有的类名,数组
  • classList.remove(cls) 删除指定类
  • classList.add(cls) 添加类
  • classList.contains(cls) 存在返回true,否则返回false
  • classList.toggle(cls) 存在就删除,否则添加
点击查看具体使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
	<style>
		.c1{
			width:200px;
			height:200px;
			border-radius:50%;
			background:yellow;
		}
		.bg_red{
			background:red;
		}
		.bg_green{
			background:green;
		}
	</style>
</head>
<body>
	<div id='d1' class="c1 bg_red bg_green">
	</div>
	<script>
		// 找到标签
		let div_ele = document.getElementById('d1');
		// 返回标签内所有的类属性   DOMTokenList(3) ['c1', 'bg_red', 'bg_green', value: 'c1 bg_red bg_green']
		div_ele.classList;
		// 以字符串的形式返回所有的类属性   'c1 bg_red bg_green'
		div_ele.className;
		// 删除bg_green类属性
		div_ele.classList.remove('bg_green');
		// 添加bg_green类属性
		div_ele.classList.add('bg_green');
		// 判断标签中是否有bg_red类属性,包含就返回true,不包含就返回false
		div_ele.classList.contains('bg_red');
		// 判断标签中是否包含bg_red这个类,包含就删除这个类,不包含就添加这个类
		div_ele.classList.toggle('bg_red');
	</script>
</body>
</html>

## 弹出框 可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:

alert("你看到了吗?");

确认框(了解即可)

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:

confirm("你确定吗?")

提示框(了解即可)

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

语法:

prompt("请在下方输入","你的答案")

js常用事件

原文地址:http://www.cnblogs.com/liuhousheng/p/16804319.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性