博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript中常用到的方法和事件
阅读量:4164 次
发布时间:2019-05-26

本文共 2331 字,大约阅读时间需要 7 分钟。

一、DOM

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

元素中: 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 Screenscreen.availWidth - 可用的屏幕宽度screen.availHeight - 可用的屏幕高度Window Locationlocation.hostname 返回 web 主机的域名location.pathname 返回当前页面的路径和文件名location.port 返回 web 主机的端口 (80 或 443)location.protocol 返回所使用的 web 协议(http: 或 https:)Window Historyhistory.back() - 与在浏览器点击后退按钮相同history.forward() - 与在浏览器中点击向前按钮相同history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面history.go(0);  // go() 里面的参数为0,表示刷新页面Window Navigatornavigator.appCodeName   浏览器代号navigator.appName 浏览器名称navigator.appVersion    浏览器版本navigator.cookieEnabled    启用Cookiesnavigator.platform   硬件平台navigator.userAgent   用户代理navigator.systemLanguage  用户代理语言

三、事件

addEventListener()用于向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。你可以向一个元素添加多个事件句柄。你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。你可以使用 removeEventListener() 方法来移除事件的监听。语法element.addEventListener(event, function, useCapture);第一个参数是事件的类型 (如 "click" 或 "mousedown").第二个参数是事件触发后调用的函数。第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。事件冒泡或事件捕获?事件传递有两种方式:冒泡与捕获。事件传递定义了元素事件触发的顺序。 如果你将 

元素插入到

元素中,用户点击

元素, 哪个元素的 "click" 事件先被触发呢?在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

元素的点击事件先触发,然后会触发

元素的点击事件。在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:
元素的点击事件先触发 ,然后再触发

元素的点击事件。addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

…未完待续

转载地址:http://mnxxi.baihongyu.com/

你可能感兴趣的文章