【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili
window 代表浏览器窗口
window.innerHeight 936 window.innerWidth 1365 window.outerHeight 1040 window.outerWidth 1920
Navigator 封装了浏览器的信息
大多数时候,我们不会使用navigator
对象,因为会被人为修改!
不建议使用这些属性来判断和编写代码
代表屏幕尺寸
location 代表当前页面的URL信息
location.reload() // 刷新网页 location.assign("...") // 设置新的地址
document 代表当前的页面 HTML DOM文档树
获取具体的文档树节点
<dl id="test"> <dt>Java</dt> <dt>Python</dt> </dl> <script> var dl = document.getElementById("test") console.log(dl) </script>
获取cookie
document.cookie
劫持cookie原理
<script src = "temp.js"></script> 获取cookie上传到服务器
服务器端可以设置 cookie: httpOnly
history 代表浏览器的历史记录
history.back() history.forward()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> // 对应CSS选择器 var h1 = document.getElementsByTagName("h1") var p1 = document.getElementById("p1") var p2 = document.getElementsByClassName("p2") var father = document.getElementById("father") var children = father.children father.firstChild father.lastChild </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="id1"> </div> <script> // 操作文本 var id1 = document.getElementById("id1") id1.innerText = "修改文本的值" id1.innerHTML = '<strong>修改文本的值</<strong>' // 操作CSS id1.innerText = "默认值" id1.style.color = "red" id1.style.fontSize = "20px" id1.style.padding = "2em" </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> var h1 = document.getElementsByTagName("h1") // 先获取父节点 再通过父节点删除自己 var self = document.getElementById("p1") var father = self.parentElement father.removeChild(self) // 动态删除:删除多个节点的时候 children是在时刻变化的 删除节点的时候一定要注意 father.removeChild(father.children[0]) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 获得某个DOM节点 假设这个DOM节点为空 可以通过innerHTML增加元素 若这个DOM节点已经存在元素了 会产生覆盖--> </head> <body> <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> // !发现IDEA.var后缀补全的带";" // 了解了下JS分号相关 决定之后还是都加分号吧 var js = document.getElementById('js'); var list = document.getElementById('list'); // 追加 list.appendChild(js); // 新建节点 var newP = document.createElement('p'); // 创建p标签 // newP.setAttribute('id', 'newP'); newP.id = 'newP'; newP.innerText = 'creat success'; list.appendChild(newP); // 创建标签节点 (通过Attribute可以设置任何的值) var newScript = document.createElement('script'); newScript.setAttribute('type', 'text/javascript'); list.appendChild(newScript); // 创建一个Style标签 var newStyle = document.createElement('style'); newStyle.setAttribute('type', 'text/css'); newStyle.innerHTML = 'body{background-color:red}'; document.getElementsByTagName('head')[0].appendChild(newStyle); var ee = document.getElementById('ee'); var js = document.getElementById('js'); var list = document.getElementById('list'); // 要包含的节点.insertBefore(newNode, targetNode) list.insertBefore(js, ee); </script> </body> </html>
本文作者:双份浓缩馥芮白
原文链接:https://www.cnblogs.com/Flat-White/p/15028137.html
版权所有,如需转载请注明出处。