WEB前端 -- DOM
DOM描述
文档对象模型(document object model,DOM) 是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式，我们最关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
一、查找元素
1.1 直接查找
document.getElementById 根据ID获取一个标签
document.getElementByName 根据name属性获取标签集合
document.getElementByClassName 根据class属性获取标签集合
document.getElementByTagName 根据标签名获取标签集合
1.2 间接查找
parentNode 查找父节点
childNodes 查找所有子节点
firstChild 查找第一个子节点
lastChild 查找最后一个子节点
nextSibling 查找下一个兄弟节点
previousSibling 查找上一个兄弟节点
parentElement 查找父节点标签元素
children 查找所有子标签
firstElementChild 查找第一个子标签元素
lastElementChild 查找最后一个子标签元素
nextElementSibling 查找下一个兄弟标签元素
previousElementSibling 查找上一个兄弟标签
二、操作
2.1 内容
innerText
innerHTML
value
input value获取当前标签的中的值
select 获取选中的value值(selectedIndex)
textarea value获取当前标签中的值
2.2 属性
setAttribute 创建属性
removeAttribute 删除属性
attributes 获取所有属性
2.3 Class 操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
2.4 标签并添加
2.4.1 创建标签
a.字符串方式 function AddEle1() { //创建一个标签 var tag = "<p><input type='text /'></p>"; //将标签添加到i1里面 document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' b.对象方式 function AddEle2() { //创建一个input标签 var tag = document.createElement('input'); //指定input标签的格式 tag.setAttribute('type','text'); //设置input标签的样式 tag.style.fontSize = '16px'; tag.style.color = 'red'; //创建一个p标签，将input标签包含在p标签中 var p = document.createElement('p') p.appendChild(tag) //将标签添加到i1中 document.getElementById('i1').appendChild(p); }
2.5 样式操作
className 获取标签有哪些class样式
classLiss 将获取出来的标签列表的形式显示
classList.add 添加一个class样式
classList.remove 删除一个class样式
obj.style.color = red; 以对象的方式设置样式
2.6 位置操作
总文档高度
document.documentElement.offsetHeight
当前文档占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距离上级定位高度
tag.offsetTop
父定位标签
tag.offsetParent
滚动高度
tag.scrollTop
/*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
2.7 提交表单
document.getElementById('form').submit()
2.8 其他操作
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
2.9 事件与词法分析
2.9.1 DOM事件：
58面试题：行为，样式，结构 相分离的页面？ 行为：JavaScript 样式：CSS 结构：HTML this：谁调用这个函数，这个this就指向谁。 onmouseover:鼠标在上面 onmouseout：鼠标移动开 绑定事件两种方式： a.直接标签绑定 onclick = 'xxx()' b.先获取Dom对象，然后进行绑定 document.getElementById('xxx').onclick c.第三种方式绑定 mydiv.addEventListener('click',function(){console.log('aaa')},false) 事件的模型： false：是冒泡模型 true：表示捕捉模型 ps：如果遇到多层的时候，就会用到事件模型，如果为true的时候，就是从最顶层往下触发，如果为false的时候，就是从最底层往下触发。 this当前触发事件的标签 a. 第一种绑定方式 <input type = 'button' onclick='Clickon(this)'> function Clickon(self){ //self 当前点击的标签 } b.第二种方法绑定 <input id = 'i1' type = 'button'> document.getElementById('i1').onclick = function(){ //this 代指当前点击的标签 }
2.9.2 词法分析
function t1(age){
console.log(age);
var age = 27;
console.age(age);
function age(){}
console.age(age);
}
t1(3);
=============结果===============
age(){} //声明表达式
27
27
================================
分析
active object ===> AO
1.形式参数
2.局部变量
3.函数声明表达式
1、形式参数
AO.age = undefined
AO.age=3；
2、局部变量
AO.age = undefined
3、函数声明表达式
AO.age = function()
ps：在处理这样的程序时(当时不会这样写，只是举例)，传进来的形参就会被函数的声明表达式给优先覆盖，覆盖后var age = 27；就是第二个打印了，而第三个就是这个表达式也没有被执行，因此还是27。
事件如图所示
