首页 > 其他分享> > BOM与DOM操作学习

BOM与DOM操作学习

2022-03-02 19:58:37 作者：互联网

1、前戏

JavaScript分为 ECMAScript，DOM，BOM，网页的一些交互功能就嘚用上BOM和DOM相关知识。

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

2、BOM

2.1、window（重要）

window 代表浏览器窗口

window.alert(1)//弹框
window.innerHeight//浏览器内边框高度
window.innerwidth//浏览器内边框宽度
window.open()//打开新窗口
window.close()//关闭当前窗口
。。。
//可以去调试浏览器窗口试试其他的......

2.2、Navigator(了解即可)

Navigator 封装了浏览器的信息

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

2.3、screen(了解即可)

screen 代表屏幕尺寸

screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度
screen.height
screen.width

2.4、history对象（了解即可）

history 对象包含浏览器的历史。浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward()  // 前进一页
history.back()  // 后退一页

2.5、location(重要)

location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.host:"服务器"
location.href:"路径"
location.protocol:"协议"
location.reload()//刷新网页
location.assign()//设置新的地址

3、DOM

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

HTML DOM 树：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnt6d7YE-1646221695300)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20220302155008141.png)]

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

3.1、获取节点

let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');

let children = father.children;//获取父节点下的所有节点

3.2、更新节点

<div id="id1">123</div>

<script>
    let id1 = document.getElementById('id1');
</script>

操作文本

id1.innerText='456' //修改文本的内容
id1.innerHTML='<strong>123</strong>'  //可以解析HTML文本标签

操作css

对于没有中横线的CSS属性一般直接使用style.属性名即可
```
id1.style.margin
id1.style.width
id1.style.left
id1.style.position
```
对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可(即驼峰)
```
id1.style.marginTop
id1.style.borderLeftWidth
id1.style.zIndex
id1.style.fontFamily
```

3.3、创建节点

createElement(标签名)

<script>
    //1.通过Js创建一个新的节点
    let newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'hello';
    list.appendChild(newP)
    //2.通过setAttribute 创建一个标签节点
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    //创建一个style标签
    let myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: yellowgreen;}';//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

3.4、插入节点

1.追加 append 2.插入 insert

<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>
    //1.追加 append
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.appendChild(js);//指追加js到list后面
    //2.插入 insert
    let ee = document.getElementById('ee');
    list.insertBefore(js,ee);//js 节点插入到了 ee 节点前面
</script>

3.5、删除节点

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

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    let self = document.getElementById('p1');
    let parentSelf = p1.parentElement;
    //parentSelf.removeChild(self);

    //删除是一个动态过程
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);//Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
</script>

注意：删除多个节点时，children是时刻在变化的！

标签：style,浏览器,DOM,id1,学习,let,BOM,document,节点
来源： https://blog.csdn.net/Yg123345/article/details/123238515