浅谈Dom和Bom(清晰易懂版)

浅谈Dom和Bom(清晰易懂版)_第1张图片

DOM(文档对象模型)

DOM 是浏览器提供的一种操作网页内容和结构的 API,它将 Web 页面表示为一个树形结构,其中每一个 HTML 元素都是一个节点,可以通过 DOM API 对其进行访问和操作。DOM API 包括了一系列方法和属性,可以用来修改网页的内容、样式和结构,实现动态效果和用户交互。

DOM 树的根节点是 document 对象,它代表了整个 HTML 文档,可以通过 document 对象访问到 HTML 元素、文本节点、属性节点等。

DOM API 可以分为以下几类:

  1. 节点遍历和选择器:通过 document 对象的方法和属性,可以遍历和选择 DOM 树中的节点,如 getElementById()getElementsByTagName()querySelector()querySelectorAll() 等。

  2. 节点操作:通过 document 对象的方法和属性,可以对 DOM 树中的节点进行操作,如 createElement()appendChild()insertBefore()removeChild()setAttribute()getAttribute() 等。

  3. 样式操作:通过 document 对象的 CSS 属性,可以对 DOM 元素的样式进行操作,如 styleclassNameclassList 等。

  4. 事件处理:通过 document 对象的事件处理属性和方法,可以对 DOM 元素的事件进行处理,如 onclickonmouseoveraddEventListener()removeEventListener() 等。

BOM(浏览器对象模型)

BOM 是浏览器提供的一种操作浏览器窗口和其他浏览器相关的对象的 API,它包括了窗口、文档、历史记录、位置、屏幕等对象,可以通过 BOM API 对其进行访问和操作。BOM API 包括了一系列方法和属性,可以用来控制浏览器的行为、操作浏览器窗口、获取用户信息等。

BOM API 可以分为以下几类:

  1. 窗口操作:通过 window 对象的方法和属性,可以对浏览器窗口进行操作,如 open()close()resizeTo()moveTo() 等。

  2. 文档操作:通过 document 对象的方法和属性,可以对浏览器文档进行操作,如 write()writeln()cookiereadyState 等。

  3. 历史记录操作:通过 history 对象的方法和属性,可以对浏览器的历史记录进行操作,如 back()forward()go() 等。

  4. 位置操作:通过 location 对象的方法和属性,可以获取当前页面的 URL 和对 URL 进行操作,如 hrefprotocolhostnamepathname 等。

  5. 屏幕操作:通过 screen 对象的方法和属性,可以获取屏幕的信息,如 widthheightcolorDepthavailWidthavailHeight 等。

需要注意的是,BOM API 并没有被标准化,不同浏览器的实现可能会有所不同,因此在使用 BOM API 时要特别注意浏览器兼容性问题。

总之,DOM 和 BOM 是 Web 开发中两个重要的概念,分别代表了文档对象模型和浏览器对象模型。通过使用 DOM 和 BOM API,可以对 Web 页面和浏览器进行灵活的操作和控制,实现更丰富、更复杂的 Web 应用程序。

你可能感兴趣的:(JavaScript,前端,html,javascript)