BOM与DOM操作学习

2022-03-02 19:58:37 阅读：135 来源： 互联网

标签：style 浏览器 DOM id1 学习 let BOM document 节点

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9