浏览器对象模型 BOM和文档对象模型DOM

DOM(文档对象模型,Document Object Model)是一个平台和语言无关的接口,它提供了一种结构化的方法来表示和操作 HTML 和 XML 文档。通过 DOM,文档被表示为一个树状结构,文档的每个部分都可以作为一个对象进行访问和操作。

一 DOM 的基本概念

节点(Node):

DOM 树由各种节点组成,每个节点代表文档的一个部分。主要的节点类型包括:

  • 元素节点(Element Node): 代表文档中的元素(如

    )。

  • 文本节点(Text Node): 代表元素中的文本内容。
  • 属性节点(Attribute Node): 代表元素的属性(如 id=“example”)。
  • 文档节点(Document Node): 代表整个文档。

节点树(Node Tree):

  • DOM 文档结构呈现为一棵树,其中根节点是文档节点。元素节点作为树的分支,而文本节点则作为树的叶子。

访问和操作 DOM:

  • JavaScript 可以用于访问和操作 DOM 节点,实现动态修改网页内容、结构和样式。

1 DOM 操作示例

  • 访问元素节点:
// 获取元素节点
var element = document.getElementById("myElement");

// 获取多个元素节点
var elements = document.getElementsByClassName("myClass");
  • 修改元素内容:
// 修改元素的文本内容
var element = document.getElementById("myElement");
element.textContent = "新的文本内容";

// 修改元素的 HTML 内容
element.innerHTML = "新的 HTML 内容";
  • 修改元素属性:
// 修改元素的属性
var element = document.getElementById("myElement");
element.setAttribute("class", "newClass");

// 获取元素的属性
var className = element.getAttribute("class");
  • 添加和删除元素:
// 创建新元素
var newElement = document.createElement("div");
newElement.textContent = "这是一个新创建的元素";

// 将新元素添加到 DOM 中
document.body.appendChild(newElement);

// 删除元素
var elementToRemove = document.getElementById("removeMe");
elementToRemove.parentNode.removeChild(elementToRemove);
  • 修改样式:
// 修改元素的 CSS 样式
var element = document.getElementById("myElement");
element.style.color = "blue";
element.style.fontSize = "20px";
  • 事件处理:
// 为元素添加事件监听器
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("按钮被点击了!");
});

// 也可以使用传统的方式
button.onclick = function() {
  alert("按钮被点击了!");
};

2 常用 DOM 方法和属性

  • document.getElementById(id): 根据 ID 获取单个元素。

  • document.getElementsByClassName(className): 根据类名获取多个元素。

  • document.getElementsByTagName(tagName): 根据标签名获取多个元素。

  • document.querySelector(selector): 根据 CSS 选择器获取单个元素。

  • document.querySelectorAll(selector): 根据 CSS 选择器获取多个元素。

  • element.appendChild(node): 将一个节点添加到指定元素的子节点列表中。

 <ul id="myList">
        <li>1</li>
        <li>2</li>
    </ul>
    <button onclick="addItem()">添加新项目</button>

    <script>
        function addItem() {
            var ul = document.getElementById("myList");
            var li = document.createElement("li");
            li.textContent = "新项目";
            ul.appendChild(li);
        }
    </script>
  • element.removeChild(node): 从指定元素中删除一个子节点。
<ul id="myList">
        <li>项目 1</li>
        <li>项目 2</li>
        <li id="removeMe">项目 3</li>
    </ul>
    <button onclick="removeItem()">删除项目 3</button>

    <script>
        function removeItem() {
            var item = document.getElementById("removeMe");
            item.parentNode.removeChild(item);
        }
    </script>
  • element.classList.add(className): 向元素添加一个或多个类名。
  • element.classList.remove(className): 从元素中移除一个或多个类名。
  • setAttribute 和 getAttribute: 设置或获取元素的属性值。
 <input type="text" id="myInput" placeholder="输入一些文本">
    <button onclick="setPlaceholder()">设置占位符</button>
    <button onclick="showPlaceholder()">显示占位符</button>

    <script>
        function setPlaceholder() {
            var input = document.getElementById("myInput");
            input.setAttribute("placeholder", "新的占位符文本");
        }

        function showPlaceholder() {
            var input = document.getElementById("myInput");
            alert("当前占位符: " + input.getAttribute("placeholder"));
        }
    </script>

DOM 使得网页能够动态变化,提升了网页的交互性和用户体验。通过 JavaScript 操作 DOM,开发者可以在页面加载后动态地修改内容、响应用户操作和实现复杂的交互效果。

二 浏览器对象模型 BOM

浏览器对象模型(BOM,Browser Object Model)是 Web 浏览器提供的一组 JavaScript 对象和方法,用于与浏览器进行交互。BOM 使得 JavaScript 可以访问浏览器的功能,除了 Web 页面的内容和结构之外,还可以控制浏览器窗口、历史记录、导航、用户代理信息等。下面是 BOM 的一些核心组件及其功能:

1. window 对象

window 对象是 BOM 的核心,表示浏览器窗口。所有其他 BOM 对象都是 window 对象的属性。

常用属性和方法:

  • window.alert(message):显示一个警告框。
  • window.confirm(message):显示一个确认框,返回用户的选择(true 或 false)。
  • window.prompt(message, default):显示一个提示框,允许用户输入文本。
  • window.location:表示当前文档的 URL 和浏览器的地址栏。可以用来获取和设置 URL。
  • window.history:访问浏览器的历史记录。
  • window.navigator:提供有关浏览器和操作系统的信息。
  • window.localStorage 和 window.sessionStorage:用于存储数据在本地存储和会话存储中。

2. location 对象

location 对象用于处理当前文档的 URL。

常用属性和方法:

  • location.href:获取或设置当前 URL。
  • location.protocol:获取当前 URL 的协议(如 http: 或 https:)。
  • location.host:获取当前 URL 的主机(包括端口号)。
  • location.pathname:获取当前 URL 的路径。
  • location.search:获取当前 URL 的查询字符串。
  • location.hash:获取当前 URL 的锚点。
  • location.assign(url):加载新的 URL。
  • location.reload():重新加载当前页面。
  • location.replace(url):加载新的 URL,并替换当前页面,不会在历史记录中留下记录。

3 history 对象

history 对象提供对浏览器历史记录的访问。

常用方法:

  • history.back():返回到历史记录中的前一个页面。
  • history.forward():前进到历史记录中的下一个页面。
  • history.go(n):前进或后退到历史记录中的第 n 个页面。
  • history.length:返回历史记录的数量。

4 navigator 对象

navigator 对象提供有关浏览器的信息,如用户代理字符串和浏览器的功能支持情况。

常用属性:

  • navigator.userAgent:返回一个字符串,表示浏览器的用户代理(即浏览器的名称、版本号等信息)。
  • navigator.platform:返回操作系统平台的字符串。
  • navigator.language:返回浏览器的语言设置。
  • navigator.cookieEnabled:指示浏览器是否启用 Cookies。

5 screen 对象

screen 对象提供有关用户屏幕的信息。

常用属性:

  • screen.width:屏幕的宽度(以像素为单位)。
  • screen.height:屏幕的高度(以像素为单位)。
  • screen.availWidth:可用的屏幕宽度(不包括任务栏等)。
  • screen.availHeight:可用的屏幕高度(不包括任务栏等)。

总结
BOM 允许 JavaScript 脚本与浏览器的各个方面进行交互,从而使开发者能够构建更加动态和互动的网页。掌握 BOM 的使用方法对于前端开发者来说是非常重要的。

你可能感兴趣的:(javascript,前端,开发语言)