1.DOM document object model
dom的查找:
(1)直接查找:
var obj=document.getElementById('id1')
(2)间接查找:
- 文件内容操作:
(1)
innerText 仅文本
innerHTML 仅内容
(2) value
input value 获取当前标签中的值
select 获取选中的value值 (selectedIndex)
搜索框的示例
- 样式操作:
(1)className
(2) classList
classList.add
classList.remove
- 属性操作:
obj.setAttribute(‘value’,‘yang’)
obj.attributes 获取所有属性
obj.removeAttribute
- 创建标签,并添加到html中
a.字符串形式
b.对象的形式
document.createElement(‘div’)
- 提交表单
任何标签通过dom都可以提交表单
document.getElementById(‘form’).submit()
- 其他
console.log 输出
alter 弹窗
var f=confirm(信息) 确认框 f为true flase
location.href 获取当前url
location.href="" 重定向 跳转
location.reload() 页面刷新setInterval(func,5000) 定时器
clearInterval(obj)
setTimeout(func,5000) 5s之后执行引用
(3)事件
onclick onblur onfocus
绑定事件的三种方式:
- 直接标签绑定 οnclick=…
<input type='button' onclick='clickOn(this)'>
function ClickOn(self){
// self 当前点击的标签
}
}
- 先获取dom对象 然后进行绑定
document.getElementById('xx').onclick=function(){
//this 代表当前点击标签 不是this 会因为作用域 function先放在内存
//但是每次调 都不一定是这个obj来调
}
作用域实例:
var myTrs = document.getElementsByTagName("tr");
var len =myTrs.length;
for (var i=0;i<length;i++){
myTrs[i].onmouseover=function{
this.style.back.... //必须要用this 不能用myTrs[i]
}}
}
c.第三种绑定方式(面试题)
addEventListener(true/false)
事件的捕捉与冒泡(具体百度有图 这里不列出来了)
true 捕捉 false 冒泡 默认false
捕捉 那个上到下 冒泡 从下到上
小示例:完成需求,点击click完成两个行为
<div id="i1">
<div id="i2"></div>
</div>
var obj1=document.getElementById('i1')
var obj2=document.getElementById('i2')
obj1.addEventListener('click',function{console.log('1')},false)
obj2.addEventListener('click',function{console.log('2')},false)
冒泡:false 先打印 2 再打印1
捕捉:true 先打印1 再打印2
(4)重点 JS词法分析(核心) 面试考
浏览器执行函数的时候 并没有马上执行 而是先进行词法分析
词法分析示例:
function t1(age){
console.log(age)
var age=27
console.log(age)
function age(){}
console.log(age)
}
t1(3);
打印结果是 function age{} ,27, 27
词法分析顺序
active object AO
1.形式参数
2.函数内局部变量
3.函数内声明表达式
对于上面的示例 我们按照词法分析顺序的规则来进行词法分析:
分析流程:
1.形式参数 AO.age=undefined AO.age=3
2.局部变量 AO.age=undefined(之前有AO.age=3 但是不会做任何改变)
3.函数声明表达式 AO.age=function() 因为函数优先级比较高 不用undefined 所以执行的时候 age=function(){}
所以结果就是 function 然后age被27覆盖 就是27 最后function调用 输出27