对象的扩展"/>
BOM对象的扩展
BOM对象
-
window代表浏览器的窗口
-
window.alert(1) undefined window.innerHeight 254 window.outerHeight 123 window.innerWidth 255 window.outerwidth 211
-
Navigator.appName navigator.appVersion//使用者的版本使用 navigator.userAgent//用户的信息 navigator.platform
-
代表屏幕的信息
-
screen.width 1920 screen.height 3400
-
location(重要)代表当前页面的URL信息
-
honst:"www.baidu"//主机 href: "/"//地址 protocol: "https:"//协议 location.reload()//刷新页面
-
document代表当前的页面,HTML DOM文档树
-
document.title "百度一下,你就知道" document.title = 'BOY说' "BOY说"
-
获取具体的文档树节点
-
<dl id="app"><dt>123</dt><dd>244</dd><dd>244</dd><dd>244</dd> </dl> <script> let name = document.getElementByld('app'); </script>
-
获取cookie
-
document.cookie //获取的是个人的隐私例如账号
-
劫持cookie原理
-
www.taoboa
-
<script src="aa.js"></script> //恶意人员会设置js病毒将cookie上传到他的服务器
-
history(不建议使用)
-
history.back()//后退 history.forward()//前进
-
浏览器网就是一个Dom树形结构
-
更新:跟新Dom节点
-
遍历dom节点;得到Dom节点
-
删除:删除一个Dom节点
-
添加: 添加一下新的节点
-
要操作一个Dom节点,就必须要获得这个Dom节点
-
<div id = "father"><h1> 标题一 </h1><p id = "p1" > p1 </p><p class = "p2" >p2 <p> </div> <script> var h1 = document.getElementByTagName('h1'); var p1 = document.getElementById('p1'); var p1 = document.getElementByClassName('p2'); var father = document.getElementById('father'); let childrens = father.children;//获取父节点下的所有字节点 //father.firstChild //father.lastChild </script>
-
删除节点remove
-
<div id='father'><h1>标题一</h1><p id='p1'>p1</p><p class='p2'>p2</p> </div> <script>let son = document.getElementById('p1');let father = p1.getElementById;//将父类声明出来father.removeChild(son)删除是一个动态的过程:father.removeChild(father.children[0])father.removeChild(father.children[1])father.removeChild(father.children[2]) </script>
-
注意: 删除多个节点时,children是时刻都在变化的,不可跨越下标进行删除
-
插入节点
-
我们获取某个Dom节点,如果这个dom是空的,我们可以通过innerHTML就可以增加一个元素,但是这个DOM节点已经存在元素了,我们就不能这么干了。会被覆盖
-
<p id="js">javaScript<p> <div id="list"><p id="se">JAVASE</p><p id="ee">JAVAEE</p><p id="me">javaME</p> </div> <script>var js = document.getElementById('js');var list = document.getElementById('list');list.appendChild(js);//追加到div的列表中var newp = document.getElementById('js');//已经存在的节点var list = document.getElementById('list');//通过js创建一个新的节点var newp = document.createElement('p');//创建一个p标签newP.id = 'nenw';newP.innerText = 'Hello,kuangshen';//创建一个标签节点let myScript = document.creaElement('script');myScript.setAttribute('type','text/javascript');myScript.innerHTML = 'body{background-color: chartreuse;}';</script>
-
定位插入要包含的元素
-
<p id="js">javascript</p><div id="list"><p id="se">javase</p><p id="ee">javaee</p><p id="me">javame</p></div><script>let ee = document.getElementById('ee');//声明出eelet js = document.getElementById('js');let list = document.getElementById('list');//声明出listlist.inserBefore(js, ee);//把js插入到ee的前面</script>
更多推荐
BOM对象的扩展
发布评论