javascript学习大纲知识点总结之三

最新推荐文章于 2024-08-23 16:53:29 发布

Shawyu_

最新推荐文章于 2024-08-23 16:53:29 发布

阅读量318

点赞数 1

分类专栏： JS知识点文章标签： javascript 学习总结复习知识点

本文链接：https://blog.csdn.net/PrisonersDilemma/article/details/89415563

版权

JS知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文深入探讨了浏览器对象模型(BOM)与文档对象模型(DOM)的核心概念，包括window对象的功能与属性，DOM树的节点操作，以及节点属性值的管理。通过详细解释，帮助读者理解BOM和DOM在网页交互中的作用。

摘要由CSDN通过智能技术生成

文章目录

- 10 BOM
- 11 DOM

10 BOM

10.1 window
- 10.1.1 window是全局浏览器内置顶级对象。
- 10.1.2 window属性可作为全局变量来使用。如window.document只写document。
- 10.1.3 全局变量默认挂在window下。
- 10.1.4 子对象：document、history、location、navigator、screen
- 10.1.5 常用方法：setInterval()、setTimeout()、alert()、confirm()、prompt()
- 10.1.6 事件：onload、onscroll、onresize
10.2 javascript包含DOM,BOM,ECMAScript！但BOM和DOM不是JS独有的！
10.3 window是BOM顶级对象，document是DOM的顶级对象！通俗点说BOM包含DOM！
10.4 JavaScript原生中默认是没有console对象，这是游览器提供的内置对象。

11 DOM

11.1 DOM树 node节点
- 11.1.1 NodeType、nodeName、nodeValue
- 11.1.2 innerHTML、innerText
- 11.1.3 setAttribute、getAttribute
- 11.1.4 文档碎片createDocumentFragment()避免多次插入，一次性插入
11.2 节点操作：
- 11.2.1 获取：
- 11.2.1.1 .getElementById()、.getElementsByTagName()、.getElementsByName( ) 、.getElementsByClassName()、.querySelector ()、.querySelectorAll ()
- 11.2.1.2 .children、.parentNode、.previousSibling、.nextSibling、.childNodes、.firstChild、.lastChild、.firstElementChild、.lastElementChild、.parentNode
- 11.2.2 创建：var oDiv = document.createElement(“div”);
- 11.2.3 插入：parentNode.appendChild(childNode); parentNode.insertBefore(newNode, targetNode);
- 11.2.4 替换：parentNode.replaceChild(newNode, targetNode);
- 11.2.5 删除：parentNode.removeChild(childNode); node.parentNode.removeChild(node); childNode.remove() //IE不支持
- 11.2.6 克隆：clonedNode = Node.cloneNode(boolean)// true深克隆，复制该节点下的所有子节点；false浅克隆，只复制该节点。
11.3 节点属性值操作：
- 11.3.1 前缀必须是节点
- 11.3.2 获取：.getAttribute()、oBox.attributes
- 11.3.3 设置：.setAttribute()
- 11.3.4 删除：.removeAttribute()
11.4 节点类型：
- 11.4.1 nodeObj.nodeType
- 11.4.2 1-元素节点 2-属性节点 3-文本节点 8-注释节点 9-document节点
11.5 innerHTML会将标签解析；nodeValue不会进行解析，会将标签名转译成字符串，直接输出
11.6 尺寸：
- 11.6.1 box.style.width、box.style.height // 只能获取到内联style属性的CSS样式
- 11.6.2 box.clientWidth、box.clientHeight // 返回元素px大小，无单位
- 11.6.3 box.scrollWidth、box.scrollHeight
- 11.6.4 box.offsetWidth、box.offsetHeight // 返回元素px大小，无单位
11.7 位置：
- 11.7.1 box.clientLeft、box.clientTop
- 11.7.2 box.offsetLeft、box.offsetTop
- 11.7.3 box.scrollTop、box.scrollLeft