javascript中常用到的方法和事件

关注

原创最新推荐文章于 2026-03-22 00:58:18 发布 342 阅读 AI 写同款· GEO 优化 ›

一、DOM

 	 // 创建 p 标签
 	var para = document.createElement("p")
 	 
	// 创建文本元素
	var node = document.createTextNode("这是一个新的段落。");

	//将文本节点添加到 <p> 元素中：
	par.appendChild(node);


	var child = document.getElementById("p1");
	//移除
	parent.removeChild(child);


	// 替换
	var parent = document.getElementById("div1");
	var child = document.getElementById("p1");
	parent.replaceChild(para, child);

HTMLCollection 与 NodeList 的区别：

HTMLCollection 是 HTML 元素的集合。（getElementsByTagName()）

NodeList 是一个文档节点的集合。（querySelectorAll()、 childNodes ）

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

NodeList 和 HTMLCollection 不是数组，看起来可能是一个数组，但其实不是。无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。只能通过索引来获取，

二、BOM

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸


Window Screen
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度


Window Location
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）


Window History
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
history.go(0);  // go() 里面的参数为0,表示刷新页面


Window Navigator
navigator.appCodeName   浏览器代号
navigator.appName 浏览器名称
navigator.appVersion    浏览器版本
navigator.cookieEnabled    启用Cookies
navigator.platform   硬件平台
navigator.userAgent   用户代理
navigator.systemLanguage  用户代理语言

三、事件

addEventListener()
用于向指定元素添加事件句柄。
添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。


语法
element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。


事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：