DOM 的一些常用方法

DOM常用方法

1.    write

a)    作用:将内容写在页面中

b)    格式:document.write(内容);

c)     注意:可以解析标签

2.    createElement

a)    作用:创建元素节点

b)    格式:document.createElement(“标签名”);

c)     注意:返回值为创建好的节点,注意的是节点创建好后,不会立刻添加到页面,需要使用appendChild方法添加

3.    appendChild

a)    作用:将节点追加到父节点的尾部

b)    格式:父节点.appendChild(“要添加的节点”);

4.    createTextNode

a)    作用:创建文本节点

b)    格式:document.createTextNode(“文本”);

c)     注意:创建好后也需要使用appendChide添加,返回值为创建好的文本节点

5.    insertBefore

a)    作用:将创建好的节点插入到目标节点的前面

b)    格式:父节点.insertBefore(新的节点,目标节点);

6.    insertAfter方法

a)    注意:DOM中没有insertAfter方法,但是我们可以根据需求自己创建

7.    removeChild

a)    作用:删除节点

b)    格式:父节点.removeChild(要删除的节点);

c)     应用:删除空白节点

8.    cloneNode

a)    作用:复制节点

b)    格式:要复制的节点.cloneNode(true)

c)     注意:返回值为复制出来的新的节点,参数true可以有也可以没有,如果写true,那么会将所有子节点同时复制下来,如果不写,只复制当前节点

9.    replaceChild

a)    作用:替换节点

b)    格式:父节点.replaceChild(新的节点,旧的节点);

<think>好的,我现在需要回答用户关于DOM常用方法的问题。首先,我得回忆一下DOM的基本概念,确保自己理解正确。DOM是文档对象模型,它将HTML或XML文档表示为树形结构,允许程序和脚本动态访问和更新文档的内容、结构及样式。 接下来,用户要求介绍常用方法,所以我要列举主要的DOM方法,并分别说明它们的用途和示例。需要确保覆盖到元素选择、内容操作、属性处理、样式修改、事件处理、节点操作等方面。 首先,元素选择的方法。document.getElementById()是最基本的,通过ID获取元素。然后是document.getElementsByClassName()和document.getElementsByTagName(),这两个返回集合。还有现代的document.querySelector()和querySelectorAll(),支持CSS选择器,比较灵活。 接下来是操作元素内容的方法,比如innerHTML、textContent和innerText的区别。需要说明innerHTML可以解析HTML标签,而textContent获取纯文本内容,innerText考虑样式,不返回隐藏元素的文本。 属性操作方面,getAttribute()和setAttribute()是基础,还有removeAttribute()。此外,直接通过属性名访问,比如element.id或element.className,但需要注意像class这样的关键字需要使用className。 样式操作部分,可以通过style属性修改内联样式,比如element.style.color = 'red'。但修改多个样式时,可能更高效的是修改classList,使用add()、remove()、toggle()等方法。 事件处理是DOM的重要部分,addEventListener()方法用于绑定事件,比直接使用onclick属性更灵活,允许添加多个监听器。removeEventListener()用于移除事件。 节点操作方面,createElement()和createTextNode()用于创建新节点,appendChild()和insertBefore()用于插入节点,replaceChild()和removeChild()用于替换和删除节点。还有cloneNode()用于克隆节点,需要注意深拷贝和浅拷贝的区别。 另外,可能需要提到其他常用方法,比如parentNode、nextSibling等属性来遍历节点树,但用户问的是方法,所以可能不需要深入这些属性。此外,表单相关的方法,比如focus()和blur(),或者表单验证的方法checkValidity()。 需要检查是否有遗漏的重要方法,比如比较新的方法或者某些特定用途的方法,但用户可能希望了解最常用的部分。另外,确保每个方法都有简单的示例代码,用中文注释说明,但根据用户的要求,不需要实际编写代码,而是用文字描述。 还要注意用户提到的系统级指令,确保数学表达式正确,但这个问题不涉及数学内容,所以可能不需要处理这部分。回答结构要清晰,分点列出,每个方法类别下有几个具体方法,每个方法简要说明用途和示例。 最后,总结一下DOM方法的作用,强调它们如何实现动态交互和内容更新。确保语言简洁,用词准确,避免技术术语过于复杂,适合不同层次的理解。</think>DOM(文档对象模型)是操作网页内容的核心接口,以下是常用方法分类及说明: --- ### 一、元素选择 1. **`getElementById(id)`** 通过元素的 `id` 获取单个元素。 ```javascript const header = document.getElementById('header'); ``` 2. **`querySelector(selector)`** 通过 CSS 选择器获取第一个匹配元素。 ```javascript const btn = document.querySelector('.submit-btn'); ``` 3. **`querySelectorAll(selector)`** 获取所有匹配 CSS 选择器的元素集合。 ```javascript const listItems = document.querySelectorAll('ul li'); ``` --- ### 二、内容操作 1. **`innerHTML`** 获取或设置元素的 HTML 内容(可解析标签)。 ```javascript div.innerHTML = '<span>新内容</span>'; ``` 2. **`textContent`** 获取或设置元素的纯文本内容(不解析标签)。 ```javascript console.log(p.textContent); // 输出段落文字 ``` --- ### 三、属性操作 1. **`getAttribute(name)`** 获取元素的属性值。 ```javascript const link = anchor.getAttribute('href'); ``` 2. **`setAttribute(name, value)`** 设置元素的属性。 ```javascript img.setAttribute('alt', '示例图片'); ``` 3. **`classList.add()/remove()/toggle()`** 动态操作元素的类名。 ```javascript element.classList.add('active'); // 添加类 ``` --- ### 四、样式操作 1. **`style.property`** 修改元素的内联样式。 ```javascript element.style.color = '#ff0000'; element.style.display = 'none'; ``` --- ### 五、事件处理 1. **`addEventListener(event, callback)`** 为元素绑定事件监听器(支持多个事件)。 ```javascript button.addEventListener('click', () => { alert('按钮被点击!'); }); ``` --- ### 六、节点操作 1. **`createElement(tagName)`** 创建新元素节点。 ```javascript const newDiv = document.createElement('div'); ``` 2. **`appendChild(node)`** 将节点插入父元素的末尾。 ```javascript parent.appendChild(newDiv); ``` 3. **`removeChild(node)`** 删除指定子节点。 ```javascript parent.removeChild(childElement); ``` --- ### 七、表单操作 1. **`focus()` 与 `blur()`** 控制表单元素的焦点。 ```javascript input.focus(); // 聚焦输入框 ``` --- ### 总结 DOM 方法的核心作用是通过 JavaScript 动态操控页面内容、样式及行为。实际开发中,常结合事件监听(如点击、输入)实现交互逻辑,结合节点操作(增删改查)更新页面结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值