javascript高级语法二

2022-03-27 21:34:44

一、BOM对象

　　1、什么是BOM对象？

　　　　BOM是浏览器对象模型，核心对象就是window，所有浏览器都支持 window 对象。一个html文档对应一个window对象，主要功能是控制浏览器窗口的， window对象不需要创建对象,直接使用即可。

　　2、window对象的使用方法：

　　　 alert() 显示带有一段消息和一个确认按钮的警告框。

　　　 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

　　　 prompt() 显示可提示用户输入的对话框。

　　　 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

　　　 close() 关闭浏览器窗口。
　　 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

　　 clearInterval() 取消由 setInterval() 设置的 timeout。

　　　 setTimeout() 在指定的毫秒数后调用函数或计算表达式。

　　　 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

　　　 scrollTo() 把内容滚动到指定的坐标。

二、DOM节点

　　1、什么是DOM？

　　　　DOM是文档对象模型，HTML 文档中的每个成分都是一个节点。

　　2、节点的分类

　　　　元素节点：其实就是标签

　　　　文本节点：其实就是标签所要表达的内容

　　　　属性节点：其实就是标签内的属性

　　3、直接查找节点的方法

　　　　document.getElementById(“idname”)

　　　　document.getElementsByTagName(“tagname”)

　　　　document.getElementsByName(“name”)

　　　　document.getElementsByClassName(“name”)

　　4、层次导航节点属性查找

　　　　 parentElement // 父节点标签元素
　　　　children // 所有子标签
　　　　firstElementChild // 第一个子标签元素
　　　　lastElementChild // 最后一个子标签元素
　　　　nextElementtSibling // 下一个兄弟标签元素
　　　　previousElementSibling // 上一个兄弟标签元素

　　5、节点操作方法：

　　　　1、创建节点

　　　　　　createElement(标签名) ：创建一个指定名称的元素。

　　　　2、添加节点：

　　　　　　父节点.appendChild(创建的新节点名) 追加一个子节点（作为最后的子节点）

　　　　　　父节点.insertBefore(创建的新节点名,父节点下某个节点); 把增加的节点放到父节点下某个节点的前边

　　　　3、删除节点：

　　　　　　父节点.removeChild() :先获得要删除的节点，然后通过父节点来删除父节点下的子节点

　　　　4、替换节点：

　　　　　　父节点.replaceChild(创建的新节点, 父节点下需要替换的某个节点);

　　　　5、拷贝节点：

　　　　　　节点..cloneNode(true); :如果有true则表示完全拷贝（拷贝节点和节点下的子节点），否则只拷贝当前节点

　　6、节点下的属性操作方法：

　　　　1、取属性值：

　　　　　　1.1 节点名.getAttribute(属性名)
1.2 节点名.属性名（推荐使用）
2、属性赋值：

　　　　　　2.1 节点名.setAttribute(属性名，属性值)
2.2 节点名.属性名=属性值

　　　3、关于class的独有属性操作：

　　　　　　3.1 节点名.className   查看某个节点的属性

　　　　　　3.2 节点名.classList.add  向某个节点中添加属性

　　　　　　3.3 节点名.classList.remove  向某个节点中删除属性

　　　4、关于select标签：
                        ele_select.options.length=0 清空option操作
                       ele_select.selectedIndex     选中option的索引值
            5、关于style属性:
                       标签名.style.样式属性="值"

三、DOM event事件

　　1、各种事件句柄的介绍

　　　　1.1 onclick 当用户单击某个对象时调用的事件句柄。

　　　　1.2 ondblclick 当用户双击某个对象时调用的事件句柄。

　　　　1.3 onfocus 元素获得焦点。比如输入框，当鼠标进入输入框时就相当于获得焦点，就会触发事件。

　　　　1.4 onblur 元素失去焦点。应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

　　　　1.5 onchange 域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

　　　　1.6 onkeydown 某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

　　　　1.7 onkeypress 某个键盘按键被按下并松开。

　　　　1.8 onkeyup 某个键盘按键被松开。
　　　　1.9 onload 一张页面或一幅图像完成加载。
　　　　1.10 onmousedown 鼠标按钮被按下。

　　　　1.11 onmousemove 鼠标被移动。

　　　　1.12 onmouseout 鼠标从某元素移开。