DOM 之 document 查找元素方法

DOM 之 document 查找元素方法
getElementById("idName"); // 始终取得第一个 idName 的元素

getElementsByTagName("元素标签名") // 返回是一个集合,可用[索引值]来获取相关指定元素或者通过 item(索引值),如

getElementsByTagName("p")[0] / getElementsByTagName

("p").item(1);

getElementsByName("name"); // 也就是说元素必须带有 name 属性才可以获取,也是一个数组,如 <input type="text" name="name" />

===================
文档写入
write()/writeln()
document.write("内容"); / document.writeln("内容");

===============
取得特性
getAttribute()

// getAttribute() 用法
var div = document.getElementById("myDiv");
alert(div.getAttribute("id"));
alert(div.getAttribute("class"));
alert(div.getAttribute("title"));

==================

取得特性
setAttribute()

// setAttribute() 用法
var div = document.getElementById("myDiv");
alert(div.setAttribute()("id", "myid"));
alert(div.setAttribute()()("class", "myClass"));
alert(div.setAttribute()("title", "myTitle"));

============

移除特性
removeAttribute()

// removeAttribute() 用法
var div = document.getElementById("myDiv");
alert(div.removeAttribute("id"));
alert(div.removeAttribute("class"));
alert(div.removeAttribute("title"));

转载于:https://www.cnblogs.com/lin3615/p/3648768.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
获取 DOM 元素方法有多种,常用的包括以下几种: 1. 通过元素的 ID 获取: - `getElementById(id)`: 通过元素的 ID 属性获取指定的元素。 2. 通过元素的标签名获取一组元素: - `getElementsByTagName(tagName)`: 通过元素的标签名获取一组元素。 3. 通过元素的类名获取一组元素: - `getElementsByClassName(className)`: 通过元素的类名获取一组元素。 4. 通过 CSS 选择器获取匹配的第一个元素: - `querySelector(selector)`: 通过 CSS 选择器获取匹配的第一个元素。 5. 通过 CSS 选择器获取匹配的所有元素: - `querySelectorAll(selector)`: 通过 CSS 选择器获取匹配的所有元素。 这些方法都是在 `document` 对象上调用的,表示在整个文档中进行查找。其中,`getElementById` 是直接根据元素的 ID 属性进行查找,返回唯一一个匹配的元素。而其他方法都返回一组匹配的元素,可以遍历这个元素集合进行操作。 示例代码: ```html <div id="myDiv"> <p class="myClass">Hello, World!</p> <p class="myClass">This is a paragraph.</p> </div> ``` ```javascript const myDiv = document.getElementById('myDiv'); console.log(myDiv); // 输出 <div id="myDiv">...</div> const paragraphsByTagName = myDiv.getElementsByTagName('p'); console.log(paragraphsByTagName); // 输出 HTMLCollection [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>] const paragraphsByClassName = myDiv.getElementsByClassName('myClass'); console.log(paragraphsByClassName); // 输出 HTMLCollection [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>] const firstParagraphBySelector = myDiv.querySelector('p'); console.log(firstParagraphBySelector); // 输出 <p class="myClass">Hello, World!</p> const allParagraphsBySelector = myDiv.querySelectorAll('p'); console.log(allParagraphsBySelector); // 输出 NodeList [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>] ``` 通过上述代码,我们可以看到不同的方法如何获取 DOM 元素,并返回对应的结果。根据具体的需求,选择合适的方法来获取需要操作的元素

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值