day36-bom对象与dom节点

标签：dom day36 window bom var newp document 节点

操作bom对象

bom：浏览器对象模型

window对象，代表浏览器窗口

 //window.alert(22)
 window.innerHeight
 //595
 window.innerWidth
 //131
 window.innerWidth
 //322
 window.outerHeight
 //824
 window.outerWidth
 //1536

 

navigator 封装了浏览器信息

 navigator.appVersion
 //'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
 navigator.platform
 //'Win32'
 ​
 //不建议使用navigator属性判断和编写代码

 

 

screen

screen代表当前电脑屏幕

 screen.width
 //1536
 screen.height
 //864

 

 

 

location

代表当前页面的url信息

以百度为例

 host:"www.baidu.com"
 hostname:"www.baidu.com"
 href:"https://www.baidu.com/"
 protocol: "https:"
 reload: reload()//刷新网页

 

从当前页面跳转到其他页面

 location.assign('http://www.bilibili.com')

 

 

 

其他

 //document代表当前的页面，html dom文档树
 document.title
 //'百度一下，你就知道'
 ​
 ​
 //获取cookie
 document.cookie
 //'BIDUPSID=33C2B248AF50BA4D1532930E18F354D1; PSTM=1607833850; BAIDUID=857915D13671CA35E7044F3C1DBD4953:FG=1; BAIDUID_BFESS=857915D13671CA35E7044F3C1DBD4953:FG=1; ZFY=1KJ7uzmcLFByZ:A2fasn:Aaq5bnVHNZfWqnrA9SkAWql0:C; baikeVisitId=a2e509a7-59f6-4f0a-afab-df4491f9c721; BD_HOME=1; H_PS_PSSID=37856_36555_37733_37767_37625_37766_37866_36802_37761_37850_26350_22159; BD_UPN=12314753; BA_HECTOR=a08ga0al0184a1ag20a08mik1hogpp61h'
 ​
 ​
 //history 代表浏览器的历史记录
 history.back()
 history.forward()

 

 

操作dom对象

HTML标签：

 <h1>标题</h1>
 <div id="father">
     <p id="p1">p1</p>
     <p class="p2">p2</p>
     <p >p3</p>
 </div>

 

浏览器网页就是一个dom树型结构

可以更新，删除，添加dom节点

document.getElementsByTagName('h1')
 document.getElementById('p1')
 document.getElementsByClassName('p2')
 var father = document.getElementById('father')
 var children = father.children//获取父节点下的所有子节点

 

更新dom节点

var id1 = document.getElementById('id1')
 id1.innerText='123123'//修改文本的值
 id1.innerHTML='<strong>345345</strong>'//解析HTML文本标签
 id1.style.color='yellow'//操作js
 id1.style.fontSize='100px'

 

删除dom节点，寻找父节点，从父结点删除自身节点

 var self = document.getElementById('p1')
 var father = self.parentElement
 father.removeChild(p1)

 

插入dom节点

HTML标签：

<p id="js">js</p>
 <div id="list">
     <p id="se">javase</p>
     <p id="ee">javaee</p>
     <p id="me">javame</p>
 </div>

 

1. 追加插入

var js =document.getElementById('js'),
     list = document.getElementById('list');
 //list.append(js)//追加

 

2. 创建新节点

var newp=document.createElement('p')
 newp.id = 'newp';
 //newp.setAttribute('id','newp')
 newp.innerHTML = 'hello gugu';
  list.append(newp)

 

创建不同类型的节点（此处以标签节点为例），修改类型值

//创建一个标签节点
 var myscript =document.createElement('script')
 //通过setAttribute可以设置任意的值
 myscript.setAttribute('type','text/javascript')
 list.appendChild(myscript)

 

4. 创建style节点

var mystyle = document.createElement('style')
 mystyle.setAttribute('type','text/css')
 mystyle.innerHTML='body{}'
 document.getElementsByTagName('head')[0].appendChild(mystyle)

 

5. 在之前插入节点

 //在之前插入节点，找被包含的节点前.insertBefore(插入节点,被插入节点)
 var ee = document.getElementById('ee')
 list.insertBefore(js,ee)

 

标签：dom,day36,window,bom,var,newp,document,节点
From： https://www.cnblogs.com/GUGUZIZI/p/16942993.html