js学习-6

BOM

浏览器对象模型

• IE
• Chrome
• Firefox
• safair
• qq 360

window

表示浏览器窗口

window.alert("dd")
undefined
window.innerHeight
174
window.innerWidth
1280
window.outerHeight
680
window.outerWidth
1280
window.outerWidth
819
window.innerHeight
154

Navigator

封装浏览器信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
navigator.appCodeName
"Mozilla"
navigator.userActivation
UserActivation {hasBeenActive: true, isActive: true}
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
navigator.platform
"Win32"

大多不会使用 因为会被人为修改 不建议通过属性判断编写代码

screen

screen.width
1280
screen.height
720
// 屏幕尺寸

location

代表当前页面的URL 信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
reload: ƒ reload() //重新加载
location.assign('https://www.51job.com/') //跳转网页

document

代表当前的页面，HTML DOM文档数

document.title='百度一下，我不知道'
"百度一下，我不知道"

获取具体的文档树节点

<dl id="x">
    <dd>aaa</dd>
    <div>bbb</div>
    <dt>ccc</dt>
</dl>

<script>
    var a = document.getElementById('x');
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jUqHt3kW-1617371523390)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210331120334443.png)]

获取 cookie

document.cookie
"PSTM=1572873294; BIDUPSID=221DE41A09A3C6B433D70E2B22E79CC2; BAIDUID=8C2FB7C1A9EFCA805D8EC649E46A0BFA:FG=1; __guid=136081015.4444077402270134000.1606123517772.229; COOKIE_SESSION=431105_1_9_9_11_24_0_2_8_6_7_3_0_0_119_0_1606123664_1582598407_1606554650%7C9%2329_59_1606123545%7C9; __yjsv5_shitong=1.0_7_e0005ffb09cc8088db9bf3ea4477cc10c0af_300_1617074553788_113.57.185.6_df785e52; BD_HOME=1; H_PS_PSSID=33802_33817_33749_33272_31660_33779_33756_33392_33714_26350; BD_UPN=12314753; monitor_count=4; BA_HECTOR=81848hag2h0hak80qv1g67s0q0q; BDRCVFR[S4-dAuiWMmn]=I67x6TjHwwYf0; delPer=0; BD_CK_SAM=1; PSINO=3; BDSVRTM=15"

劫持 cookie 原理

<script src="aa.js"></script>

服务端可以设置 cookie ：httpOnly

history

代表浏览器的历史记录

history.back()
history.forward()

father.innerText='aaaa'
"aaaa"   //修改文本

father.innerHTML='<strong>123</strong>'
"<strong>123</strong>" //可以解析HTML标签

ss.style.color='red'
"red"

删除节点

获得父节点然后通过父节点删除子节点

father.removeChild()

删除多个节点的时候 children是时刻变化的

插入节点

节点是空的可以用innerHTML增加元素 但是不是空的不行

追加

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TeDSeu8l-1617371523396)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210401214647670.png)]

创建

<p id="js">js</p>
<div id="list">
    <p id="a">css</p>
    <p id="b">css</p>
    <p id="c">css</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');

    var newp = document.createElement('P')
    newp.id = 'newp';
    newp.innerHTML = 'hello'

    list.append(newp)

var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.append(myScript);

var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML= 'body{background-color:red;}'
list.append(myStyle);

插入节点

list.insertBefore(a,b)