javaScript的DOM与BOM操作

xiaoxiao2022-07-02 107

javaScript的DOM与BOM操作

JavaScript的组成

ECMAScript - JavaScript的核心

定义了JavaScript 的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM经常进行的操作

获取元素对元素进行操作(设置其属性或调用其方法)动态创建元素事件(什么时机做相应的操作)

获取页面元素

掌握 getElementById() getElementsByTagName() 了解 getElementsByName() getElementsByClassName() querySelector() querySelectorAll() 根据id获取元素 var div = document.getElementById('main'); console.log(div); // 获取到的数据类型 HTMLDivElement，对象都是有类型的

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素 var divs = document.getElementsByTagName('div'); 根据name获取元素 * var inputs = document.getElementsByName('hobby'); 根据类名获取元素 * var mains = document.getElementsByClassName('main'); 根据选择器获取元素 * var text = document.querySelector('#text'); console.log(text); var boxes = document.querySelectorAll('.box'); for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; console.log(box); }

属性操作

非表单元素的属性

innerHTML和innerText var box = document.getElementById('box'); box.innerHTML = '我是文本我会生成为标签'; console.log(box.innerHTML); box.innerText = '我是文本我不会生成为标签'; console.log(box.innerText); HTML转义符 " " ' ' & & < < // less than 小于 > > // greater than 大于空格 © ©

表单元素属性

value 用于大部分表单元素的内容获取(option除外)type 可以获取input标签的类型(输入框或复选框等)disabled 禁用属性checked 复选框选中属性selected 下拉菜单选中属性

自定义属性操作

getAttribute() 获取标签行内属性setAttribute() 设置标签行内属性removeAttribute() 移除标签行内属性与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

使用style方式设置的样式显示在标签行内 var box = document.getElementById('box'); box.style.width = '100px'; box.style.height = '100px'; box.style.backgroundColor = 'red';

注意

通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

类名操作

修改标签的className属性相当于直接修改标签的类名 var box = document.getElementById('box'); box.className = 'show';

创建元素的三种方式

document.write() document.write('新设置的内容标签也可以生成'); innerHTML var box = document.getElementById('box'); box.innerHTML = '新内容新标签'; document.createElement() var div = document.createElement('div'); document.body.appendChild(div);

性能问题

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。可以借助字符串或数组的方式进行替换，再设置给innerHTML优化后与document.createElement性能相近

节点操作

var body = document.body; var div = document.createElement('div'); body.appendChild(div); var firstEle = body.children[0]; body.insertBefore(div, firstEle); body.removeChild(firstEle); var text = document.createElement('p'); body.replaceChild(text, div);

节点属性

模拟文档树结构

节点层级

注意

childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素

nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素

nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

总结

节点操作，方法 appendChild() insertBefore() removeChild() replaceChild() 节点层次，属性 parentNode childNodes children nextSibling/previousSibling firstChild/lastChild

事件详解

注册/移除事件的三种方式

var box = document.getElementById('box'); box.onclick = function () { console.log('点击后执行'); }; box.onclick = null; //注册与删除事件 box.addEventListener('click', eventCode, false); box.removeEventListener('click', eventCode, false); //IE特有的删除与注册事件 box.attachEvent('onclick', eventCode); box.detachEvent('onclick', eventCode); function eventCode() { console.log('点击后执行'); }

解决注册删除事件的兼容代码

事件对象的属性和方法

event.type 获取事件类型clientX/clientY 所有浏览器都支持，窗口位置pageX/pageY IE8以前不支持，页面位置event.target || event.srcElement 用于获取触发事件的元素event.preventDefault() 取消默认行为

阻止事件传播的方式

标准方式 event.stopPropagation();IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发onmousedown 鼠标按键按下触发onmousemove 鼠标移动触发onkeyup 键盘按键按下触发onkeydown 键盘按键抬起触发

BOM

对话框

alert()prompt()confirm()

页面加载事件

onload window.onload = function () { // 当页面加载完成执行 // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行 } onunload window.onunload = function () { // 当用户退出页面时执行 }

定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

// 创建一个定时器，1000毫秒后执行，返回定时器的标示 var timerId = setTimeout(function () { console.log('Hello World'); }, 1000); // 取消定时器的执行 clearTimeout(timerId);

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

// 创建一个定时器，每隔1秒调用一次 var timerId = setInterval(function () { var date = new Date(); console.log(date.toLocaleTimeString()); }, 1000); // 取消定时器的执行 clearInterval(timerId);

location对象

location对象是window对象下的一个属性，时候的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

URL

统一资源定位符 (Uniform Resource Locator, URL)

URL的组成 scheme://host:port/path?query#fragment scheme:通信协议常用的http,ftp,maito等 host:主机服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。 port:端口号整数，可选，省略时使用方案的默认端口，如http的默认端口为80。 path:路径由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。 query:查询可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs fragment:信息片断字符串，锚点.

history对象

back()forward()go()

navigator对象

userAgent

通过userAgent可以判断用户浏览器的类型

platform

通过platform可以判断浏览器所在的系统平台类型.

特效

偏移量

offsetParent用于获取定位的父级元素offsetParent和parentNode的区别 var box = document.getElementById('box'); console.log(box.offsetParent); console.log(box.offsetLeft); console.log(box.offsetTop); console.log(box.offsetWidth); console.log(box.offsetHeight);

客户区大小

var box = document.getElementById('box'); console.log(box.clientLeft); console.log(box.clientTop); console.log(box.clientWidth); console.log(box.clientHeight);

滚动偏移

var box = document.getElementById('box'); console.log(box.scrollLeft) console.log(box.scrollTop) console.log(box.scrollWidth) console.log(box.scrollHeight)

最新回复(0)