js如何获取dom元素

abstract：dom：HTML DOM ，文档对象模型（Document Object Model）的简称，当网页被加载时，浏览器就会创建页面的文档对象模型。通常，通过 JavaScript，我们需要操作 HTML元素。为了做到这件事情，就必须首先查找并获取到该元素。在JavaScript中中通过dom查找并获取元素对象主要有三种常见方法：1、通过 id 查找并获取到元素：getElementById()get

dom：HTML DOM ，文档对象模型（Document Object Model）的简称，当网页被加载时，浏览器就会创建页面的文档对象模型。

通常，通过 JavaScript，我们需要操作 HTML元素。为了做到这件事情，就必须首先查找并获取到该元素。在JavaScript中中通过dom查找并获取元素对象主要有三种常见方法：

1、通过 id 查找并获取到元素：getElementById()

getElementById() 方法：通过ID获得节点元素，如果页面上含有多个相同id的节点对象，那么只返回第一个节点对象。

语法：

document.getElementById("元素的id");

示例代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="box" onclick="getValue()">我是测试代码</div>

function getValue(){

var x=document.getElementById("box")

alert(x.innerHTML)

}

</script>

</body>

</html>

2、通过标签名查找并获取到元素：getElementsByTagName()

getElementsByTagName()方法：是通过元素的标签名来查找并获取一组元素对象（有多少就获取多少），其返回的是带有指定标签名的对象集合。

语法：

document.getElementsByClassName("元素的标签名");

示例代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>Hello World!</p>

<p>The DOM is very useful.</p>

<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

</div>

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

</script>

</body>

</html>

3、通过class（类）查找并获取到元素：getElementsByClassName()

getElementsByClassName()方法：是通过指定的class（类）属性值来查找并获取元素的，其返回的是带有指定类名的元素集合，可以说它是一个对象的集合。

语法：

document.getElementsByClassName("元素的class");、

示例代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="a">我是测试代码1</p>

<p class="a">我是测试代码2</p>

</div>

var x = document.getElementById("main");

var y = x.getElementsByClassName("a");

document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

</script>

</body>

</html>

Correcting teacher：韦小宝Correction time：2019-03-02 17:46:35
Teacher's summary：写的很不错 css中的选择器很多语言都是通用的这一点必须要好好掌握

js如何获取dom元素

Popular Entries