BOM：浏览器对象模型
window
window代表浏览器窗口
window.innerHeight
754
window.outerHeight
824
window.innerWidth
378
window.outerWidth
1536
navigator
navigator，封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36'
大多数时候，我们不会使用navigator对象，因为可以被人为修改
不建议使用这些属性判断及编写代码
screen
屏幕分辨率
screen.width
1920
screen.height
1080
location
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('https://blog.csdn.net/Editplusplusplus?spm=1011.2124.3001.5343')
document
document当前的页面, HTML DOM文档树
document.title
'百度一下，你就知道'
document.title = '123'
'123'
获取具体的文档树节点
<body>
<dl id="app">
<dt>Javadt>
<dd>JavaSEdd>
<dd>JavaEEdd>
dl>
<script>
var dl = document.getElementById('app');
script>
body>
获取cookie
document.cookie
劫持cookie原理：参考https://www.cnblogs.com/doit8791/p/5926575.html
XXC攻击：输入javascript脚本, 窃取并投递cookie信息到自己的站点.
比如攻击者以一个普通用户登录进来，然后在输入框中提交以下数据：
快看这里
http://attacker-site.com/xss_collect/m=xxxxxxyyyyyzzz
有了该session-id，攻击者在会话有效期内即可获得管理员的权限，并且由于攻击数据已添加入数据库，只要攻击数据未 被删除，那么攻击还有可能生效，是持久性的
基于XSS攻击, 窃取Cookie信息, 并冒充他人身份.
Cookie劫持的防:
给Cookie添加HttpOnly属性, 这种属性设置后, 只能在http请求中传递, 在脚本中,document.cookie无法获取到该Cookie值. 对XSS的攻击, 有一定的防御值. 但是对网络拦截, 还是泄露了.**在cookie中添加校验信息, 这个校验信息和当前用户外置环境有些关系,比如ip,user agent等有关.**这样当cookie被人劫持了, 并冒用, 但是在服务器端校验的时候, 发现校验值发生了变化, 因此要求重新登录, 这样也是种很好的思路, 去规避cookie劫持.第三种办法:cookie中session id的定时更换, 让session id按一定频率变换, 同时对用户而言, 该 *** 作是透明的, 这样保证了服务体验的一致性.history
history代表浏览器的历史记录
history.forward() //前进
history.back() //后退
DOM：文档对象模型
核心
浏览器网页就是一个DOM树形结构
更新：更新Dom节点遍历Dom节点：得到Dom节点删除：删除一个Dom节点添加：添加一个新的节点要 *** 作一个Dom节点，就必须要先获得这个Dom节点
获得Dom节点
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children; //获取父节点下的所有子节点
father.firstChild;
father.lastChild;
father.nextElementSibling;
father.previousElementSibling;
这是原生代码，之后尽量用jQuery等
更新Dom节点
<body>
<div id="id1">
div>
<script>
var id1 = document.getElementById('id1');
script>
body>
*** 作文本
id1.innerText = '456' 修改文本的值id1.innerHTML = '123'可以解析html文本标签
*** 作css
id1.style.color 'yellow';
id1.style.fontsize='20px';
id1.style.padding ='2em'
删除Dom节点
删除节点的步骤：先获取父节点，再通过父元素删除自己
<div id="father">
<h1>标题一h1>
<p id="p1">p1p>
<p class="p2">p2p>
div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(p1);
script>
注意：删除多个节点的时候，children是时刻变化的，按下标删除节点的时候一定要注意。
father.removeChild(father,children[0]);
father.removeChild(father,children[1]);
father.removeChild(father,children[2]);
插入节点
我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素了；但是这个Dom节点已经存在元素了
<body>
<p id="js">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var js = document.getElementById("js");
var list = document.getElementById("list");
list.append(js); //追加在后面
script>
body>
创建一个新的标签，实现插入
//通过js创建一个结点
var newP = document.createElement('p'); //创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello world';
list.append(newP);
setAttribute() 方法
setAttribute() 方法添加指定的属性，并为其赋指定的值。
如果这个指定的属性已存在，则仅设置/更改值。
设置 input 元素的 type 属性：
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
| 参数 | 类型 | 描述 |
|---|---|---|
| attributename | String | 必需。您希望添加的属性的名称。 |
| attributevalue | String | 必需。您希望添加的属性值。 |
insertBefore
<p id="js">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var ee = document.getElementById('ee');
var js = document.getElementById('js');
ee.insertBefore(js, ee.firstChild);
script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）