js中DOM里面的属性,方法

本文通过一个实例展示了如何使用JavaScript操作DOM元素,包括设置文本颜色、字体大小、字体类型、背景颜色、背景图片及其位置等样式属性,并演示了如何遍历DOM对象的属性和方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js中DOM里面的属性,方法</title>
<script type="text/javascript">
//循环打印DOM里面的属性,方法
for(x in document){
document.write(x+"<br/>");
}

//设置字体颜色
document.fgColor="Orange";

//设置文档的字体大小
document.body.style.fontSize="18px";

//设置字体的类型
document.body.style.fontFamily="楷体";

//设置背景颜色
document.body.style.backgroundColor="black";

//设置背景图片
document.body.style.backgroundImage="url(Koala.jpg)";

//设置图片不平铺
document.body.style.backgroundRepeat="no-repeat";

//设置图片上下左右居中
document.body.style.backgroundPosition="center center";

//必须要赋值,才能看到效果。。
var msg="Hello";
//msg=msg.toUpperCase();
with(msg){
msg=toUpperCase();
}
alert(msg);
</script>
</head>

<body>
</body>
</html>
<think>嗯,用户想知道如何用JavaScript获取DOM元素和操作DOM树。首先,我需要回忆一下相关的DOM操作方法。根据引用内容,DOM操作包括获取元素、修改内容、属性、样式,还有节点操作。用户的问题主要集中在获取元素和操作DOM树,所以我要先整理出获取元素的不同方法。 首先,最常用的方法是通过ID获取,使用document.getElementById()。比如document.getElementById('box'),这在引用3的例子中也提到过,用来获取带有特定ID的元素。然后是通过类名获取,使用getElementsByClassName(),返回的是HTML集合,可能需要转换为数组。还有标签名获取,用getElementsByTagName(),同样返回集合。 另外,选择器方法也很重要,比如querySelector()和querySelectorAll(),前者返回第一个匹配的元素,后者返回所有匹配的NodeList。这在引用2的示例里虽然没有直接提到,但应该属于选择元素的方法之一。 接下来是操作DOM树的部分。操作元素内容可以用innerHTML、innerText和textContent。innerHTML可以解析HTML标签,而innerText只处理文本内容。修改属性的话,有setAttribute和removeAttribute,引用3中的例子展示了如何移除属性。样式操作可以直接修改元素的style属性,或者更改类名来应用CSS样式。 节点操作包括创建元素createElement,添加子节点appendChild,插入节点insertBefore,删除节点removeChild,还有克隆节点cloneNode。这些方法在引用2的动态创建元素部分有涉及,比如使用innerHTML拼接字符串或者用createElement创建新元素。 事件处理也是DOM操作的一部分,比如addEventListener来绑定事件,这在引用2的事件处理部分提到过。不过用户的问题可能更关注获取和操作,所以这部分可能不需要详细展开,但可以提一下作为相关知识点。 需要注意的地方,比如动态创建元素时的性能考虑,innerHTML可能引发重绘,而createElement更高效。还有获取元素的方法返回的是动态集合还是静态集合,比如getElementsByClassName和querySelectorAll的区别。 用户可能还想知道这些方法的应用场景,比如何时使用ID获取,何时使用选择器。另外,兼容性问题,比如旧版浏览器是否支持querySelector,但现代浏览器基本都支持了。 最后,要确保回答结构清晰,分点列出获取方法和操作方式,并附上示例代码。同时生成相关问题,帮助用户进一步学习,比如性能优化、实际应用场景等。</think>### JavaScript获取DOM元素与操作方法 #### 一、获取DOM元素的6种核心方法 1. **通过ID获取** 使用`document.getElementById("id")`,返回匹配的唯一元素对象 ```javascript const box = document.getElementById("box"); // 引用3的示例方法 ``` 2. **通过类名获取** `document.getElementsByClassName("class")`返回HTML集合 ```javascript const colors = document.getElementsByClassName("color"); ``` 3. **通过标签名获取** `document.getElementsByTagName("tag")`获取同类型元素集合 ```javascript const imgs = document.getElementsByTagName("img"); ``` 4. **CSS选择器获取** - `querySelector()`获取第一个匹配元素 - `querySelectorAll()`获取所有匹配元素(NodeList) ```javascript const item = document.querySelector("#box .item"); ``` 5. **通过name属性获取** `document.getElementsByName("name")`用于表单元素 ```javascript const inputs = document.getElementsByName("username"); ``` 6. **特殊集合获取** ```javascript document.forms // 所有表单 document.images // 所有图片 document.links // 所有超链接 ``` #### 二、DOM树操作核心方法 1. **内容操作** ```javascript element.innerHTML = "<strong>新内容</strong>"; // 解析HTML标签 element.innerText = "纯文本内容"; // 引用2的字符串拼接示例 element.textContent = "保留格式文本"; ``` 2. **属性操作** ```javascript img.setAttribute("src", "new.jpg"); // 修改属性 box.removeAttribute("n"); // 引用3的删除属性示例 ``` 3. **样式操作** ```javascript element.style.color = "#ff0000"; // 行内样式 element.className = "new-class"; // 替换类名 element.classList.add("active"); // 添加类 ``` 4. **节点操作** ```javascript const newDiv = document.createElement("div"); // 创建元素 parent.appendChild(newDiv); // 添加子节点 parent.insertBefore(newDiv, existingNode); parent.removeChild(childNode); const clone = element.cloneNode(true); // 深度克隆 ``` #### 三、操作示意图 $$ \begin{array}{ccc} \text{Document} & \rightarrow & \text{Element} \\ \downarrow & & \downarrow \\ \text{getElementById()} & & \text{appendChild()} \\ \downarrow & & \downarrow \\ \text{NodeList} & \leftarrow & \text{createElement()} \end{array} $$ #### 四、注意事项 1. 动态集合特性:`getElementsBy*`方法返回的是**动态集合**,DOM变化会实时反映 2. `querySelectorAll`返回的是**静态NodeList** 3. 批量操作时建议先转换为数组: ```javascript Array.from(document.getElementsByTagName("li")) ``` 4. 节点操作更推荐使用`insertAdjacentHTML()`方法提升性能[^2]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值