JS中BOM和DOM操作

JS中BOM和DOM操作

js是通过这两种来实现操作浏览器和html文件的：

1. BOM：浏览器对象模型 操作对象是浏览器

2. DOM：文档对象模型 操作对象是标签

BOM操作

操作对象为window对象，代指的是浏览器窗口。

window.innerHeight  浏览器窗口的高度
window.innerWidth  浏览器窗口的宽度

// 新建窗口打开页面  第一个参数为url 第二个参数为空  第三个参数写新建窗口大小和位置
window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px')‘
windows.close  关闭当前页面

windows的子对象

// navigator对象
navigator.appName  // web浏览器全称
navigator.appVersion  // web浏览器厂商和版本的详细字符串
navigator.userAgent  //  用来表示当前是否是一个浏览器
navigator.platform  //  浏览器运行所在的操作系统

// history对象
history.back()  // 回退到上一页
history.forward  // 前进到下一页

// location对象
window.location.href  // 获取当前页面的url
window.location.href = url  // 跳转到指定的url
window.location.reload()  // 刷新页面

// 弹出框
alert('弹出内容')  // 警告框
confirm('你确定吗')  // 确认框
prompt('请输入你的答案','这是你的答案')  // 提示框

// 计时器
// 如果想要清除定时任务，那么就需要设置变量
let t = setTimeout('这里可以放代码',3000)  // 过一段时间之后触发（一次）,第二个参数就是毫秒
clearTimeout(t)  // 取消定时任务

let t = setInterval('js代码',3000)  // 每隔3000毫秒就执行一次。
clearInterval(t)  // 清除定时器

DOM操作

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

当王爷被夹在之后就会被创建文档对象模型。被称为对象树，标签都可以称为是节点。

js针对DOM可以进行的操作：

1. 创建动态的HTML
2. 改变页面的HTML元素
3. 改变页面的HTMl属性
4. 改变CSS样式
5. 对页面中的所有事件做出反应

DOM主要操作的是标签，所以需要先查找标签，然后在进行操作。

// 查找标签的两种方式

在找到标签进行变量名赋值的时候，一般变量名采取的是XXXEle。

// 1.直接查找
document.getElementById('id值')  // 通过id查找，返回的是一个标签
document.getElementByClassName('类')  // 类查找 返回的是数组
document.getElementByTagName('标签名')  // 标签名查找 返回的是数组
 
// 2.间接查找
let divEle = document.getElementByID('d1')

divEle.parentElemen  // 父节点标签元素
divEle.children  // 所有子标签
divEle.firstElementChild  // 第一个子标签元素
divEle.lastElementchild  // 最后一个子标签元素
divEle.nextElementSibling  // 下一个兄弟标签元素
divEle.previousElementsibling  // 上一个兄弟标签元素

节点操作

let imgEle = document.createElement('img')  // 创建一个img标签
img.src = '111.src'  // 设置标签的默认属性
imgEle.setAttribute('username','tom')  //可以设置自定义属性和默认属性

// 对于查找到的标签内部添加元素
let divEle = document.getElementById('d1')
divEle.appendChild(imgEle)  // 在标签内部添加，尾部
divEle.insertBefore(imgEle,child)  // 添加到子标签child之前

// 设置文本属性
let aEle = document.createElement('a');
aEle.innerText = '点我你会发现新大陆'  // 给标签设置文本内容
aEle.innerHTML = '<p>你猜怎么着</p>'  // 也可以设置文本内容且识别Html标签

removeChild(删除的节点)  // 删除节点
replaceChild(newnode,某个节点)  // 替换节点
getAttribute(属性)  // 获取属性
removeAttribute(属性)  // 移除属性

获取值操作

// 获取用户标签内部的数据  node.value
let seEle = document.getElementById('select');
seEle.value  // 可以获取到值

// 获取用户上传的文件数据  node.files
let fileEle = document.getElementById('d3');
fileEle.files  // 获取到文件数据  是一个数组

classcss操作

node.classList  // 获取对所有的类属性

node.classList.remove('类属性')  // 移除某一个类属性
node.classList.add('类')  // 添加类属性
node.classlist.contains('类')  // 验证是否包含某个类
node.classList.toggle('类')  // 有则删除，无则添加

// 操作css统一由style起手
// 针对css中属性有中横线的，在js中去掉并将单词首字母大写；没有的则不变

node.style.color = 'red'

node.style.fontSize = '24px'

事件

事件：达到某个事先设定的条件，自动触发的动作

// 事件都有哪些？
onclick		用户点击某个对象时调用的事件句柄
ondbclick	用户双击某个对象时调用的事件句柄

onfocus		元素获得焦点，输入框
onblur		元素失去焦点，用于表单验证，用户离开输入框代表输入完了
onchange	域内容被改变，用于表单元素，当元素内容被改变时触发

onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被松开
onkeyup		某个键盘按键被松开
onload		一张页面或图像完成加载

onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上

onselect	在文本框中的文本被选中时发生
onsubmit	确认按钮被点击，使用对象是form

// 绑定方式有两种
<button onclick='func1()'>点我</button>

<button id='d1'>点我</button>

<script>
	//第一种绑定方式
    function func1(){}
    
	// 第二种绑定方式
	let butEle = document.getElementById('d1');
	butEle.onclick = function () {}
</script>

/*
一般情况下我们把JS代码放到body标签的尾部，
	放在其他位置有可能出现标签还未加载的情况而报错
*/





// 绑定事件的两种方式