BOM与DOM操作

BOM

BOM是浏览器对象模型
- 通过写js代码可以与浏览器进行交互

BOM操作

window.open()                 // 打开页面
window.close()                // 关闭页面
window.navigator.userAgent()  // 爬虫相关
window.history.forward()      // 前进一页
window.history.back()         // 后退一页
window.location.href          // 当前页面网址
window.location.href = 新网址  // 进入新网址
window.location.reload()      // 刷出页面
alter()                   //弹出警告框
confirm()                 //弹出确认框
prompt()                  //弹出提示框

定时器的相关操作*
function func1(){
    alert('终于要干饭了')
}
let t = setTimeout(func1,3000)    //3000毫秒(3秒后自动执行func1函数)
clearTimeout(t)                   // 取消上面的定时任务

var s1 = null
function showMsg() {
    function func1(){
        alert('终于要干饭了')
    }
    s1 = setInterval(func1, 3000) // 循环定时任务   
}
function clearMission(){          
    clearInterval(s1)             // 取消
}
setTimeout(clearMission, 9000)    // 9s后取消执行定时任务
showMsg()

DOM

DOM是文档对象模型
- 通过写js代码可以与html进行交互

//先需要知道如何查找标签，再学习操作html

 document.getElementById()
     //根据id值查找标签 结果直接是标签对象本身
 document.getElementsByClassName()
     //根据class值查找标签 结果是数组类型
 document.getElementsByTagName()
     //根据标签名查找标签 结果是数组类型
 
 parentElement            父节点标签元素
 children                 所有子标签
 firstElementChild        第一个子标签元素
 lastElementChild         最后一个子标签元素
 nextElementSibling       下一个兄弟标签元素
 previousElementSibling   上一个兄弟标签元素	
 
 节点操作:
 let XEle = document.createElement('标签名')   // 创建一个标签
 XEle.href = 'url'        // 创建一个网址
 XEle.id = 'id值'         // 创建一个id值
 XEle.innerText = '内部文本'     // 创建一个内部文本
 divEle.append(XEle)      //节点操作是动态创建的，临时有效，非永久
 	
 属性操作:
 XEle.属性  	        //只能是默认属性  src/img...
 XEle.setAttribute()      //默认属性、自定义属性
   	
 文本操作:
 divEle.innerHTML
 divEle.innerText
     实操：
     divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
        '<h1>嘿嘿嘿</h1>'  //innerHTml会识别标签
     divEle.innerText = '<h1>哈哈哈</h1>'
        '<h1>哈哈哈</h1>'  //innertext会将引号内文本展示出来

前端04 BOM与DOM

BOM与DOM操作

BOM

DOM