老男孩14期自动化运维day16随笔和作业（二）

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

绑定事件的三种方式：

直接标签绑定 onclick=…

  <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

老男孩14期自动化运维day16随笔和作业（二）

猜你喜欢