JavaScript中BOM与DOM
BOM
window对象
所有的浏览器都支持window对象，他表示浏览器窗口，
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法：
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框：alert
确认框：confirm
提示框：prompt
alert(123)//警告框
confirm(222)//确认框
prompt()//提示框计时相关
setTimeout（）计时器，等待几秒后运行
clearTimeout（）清楚计时器
setInterval（）每个三秒执行一次
clearInterval（）清除效果
function f1(){
console.log("11111")
}
// setTimeout(f1,2000)//等待几秒后执行f1，相对于计时器，第一个写执行的函数，第二个写时间以毫秒为单位1000=1s
// clearTimeout(f1)//清除计时器
var aa = setInterval(f1,3000)//没隔三秒执行一次
clearInterval(aa)//清除效果例：使func2执行三次后关闭
function func2() {
alert(123)
}
function show(){
let t = setInterval(func2,3000); // 每隔3秒执行一次
function inner(){
clearInterval(t) // 清除定时器
}
setTimeout(inner,9000) // 9秒中之后触发
}
show()
DOM
HTML DOM树：
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找标签
直接查找
id查找，class查找，标签查找
查id document.getElementByID('id')
var div = document.getElementById('d1')
console.log(div)//使用id查找
var c1 = document.getElementsByClassName("c1")[0];//使用索引查找
var c2 = document.getElementsByClassName("c1")[1];
var c3 = document.getElementsByClassName("c1")[2];
console.log(c1)
console.log(c2)
console.log(c3)
var div1=document.getElementsByTagName('div')//使用class查找
var div2=document.getElementsByTagName('div')
var div3=document.getElementsByTagName('div')
console.log(div1)
console.log(div2)
console.log(div3)
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素1. parentElement 父节点 标签查找
var d = document.getElementsByClassName('a1')[0]
var a = d.parentElement.parentElement
console.log(a)2.children所有子标签
var div =document.getElementById('d1')
var children =div.children
console.log(children)
3. firstElementChild 第一个子标签元素
var div =document.getElementById('d1')
var children =div.firstChild
console.log(children)//标签下第一个子标签4.lastElementChild 最后一个子标签元素
var div =document.getElementById('d1')
var children =div.lastChild
console.log(children)//标签下第最后一个子标签5. nextElementSibling 下一个兄弟标签
var div =document.getElementById('d1')
var children =div.nextElementSibling
console.log(children)//下一个兄弟标签
6. previousELementsibling 上一个兄弟标签
var div =document.getElementById('d1')
var children =div.nextElementSibling
console.log(children)//上一个兄弟标签节点操作
动态创建标签元素
var img=document.createElement('img');
//先查找
var div=document.getElementById('d1');
//增加属性
img.src='img.png';
//放入图片
div.appendChild(img)
console.log(img);
使用点语法是不能增加自定义属性的，如果要添加自定义属性则使用
例：动态创建a标签：
var a = document.createElement('a');
var div = document.getElementById('d1');
div.appendChild(a)
a.href="http://www.baidu.com";
a.title="点我点我"
a.innerText='来了利用'
console.log(a)
获取值操作
语法：
elementNode.value
适用于以下标签：
- .input
- .select
- .textarea
- value不能获取文件数据，获取文件数据要用files
;