今天就跟大家聊聊有关JavaScript中htmldom 元素的作用是什么，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
一、找到HTML元素
通常，使用JavaScript，想操作HTML元素。要做到这一点，必须先找到元素。有几种方法可以做到这一点。
找到DOM中的HTML元素的最简单的方法，是利用元素的id。
使用id="intro"找到元素 :
var myElement = document.getElementById("intro");如果找到元素，则该方法将返回元素作为对象 (赋值给myElement)。
元素没有被发现，myElement将是空的。
找到所有<p>元素:
var x = document.getElementsByTagName("p");这个例子使用id="main"找到元素 , 并且在"main"里面找到所有的 <p> 元素:
var x = document.getElementById("main"); var y = x.getElementsByTagName("p");如果想找到同一类名称的所有HTML元素，使用getElementsByClassName()。
例：
返回所有class="intro"的元素列表.
var x = document.getElementsByClassName("intro");在Internet Explorer 8和早期版本中，按类名查找元素不起作用。
如果想找到所有的HTML元素，匹配指定的CSS选择器 (id, 类名, 类型, 属性, 属性值, 等等), 使用querySelectorAll() 方法。
此示例返回所有class="intro"的
元素列表。
var x = document.querySelectorAll("p.intro");querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。
此示例查找id="frm1"的表单元素,在表单集合里,并显示所有的颜色值。
var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text;下面的HTML对象(或对象的集合)也可访问:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目</title> </head> <body style="background-color: aqua;"> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a><br> <a name="xml">XML Tutorial</a><br> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Number of anchors are: " + document.anchors.length; </script> </body> </html>
<script> alert(document.body.innerHTML); </script>
<script> document.getElementById("demo").innerHTML = "Number of embeds: " + document.embeds.length; </script>
<script> document.getElementById("demo").innerHTML = document.head; </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目</title> </head> <body> <img src="pic_htmltree.gif"> <img src="pic_navigate.gif"> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Number of images: " + document.images.length; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目</title> </head> <body style="background-color: aqua;"> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "The title of this document is: " + document.title; </script> </body> </html>
HTML DOM允许JavaScript获取和更改HTML元素的属性。
getAttribute()方法用于获取元素上指定属性的当前值。
以下示例获取锚元素的href和title属性的值。
var link = document.getElementById("demo"); var href = link.getAttribute("href"); var title = link.getAttribute("title");setAttribute()方法用于设置指定元素上的属性的值。
如果属性已经存在，则更新值;否则，将添加具有指定名称和值的新属性，将href属性的值设置为锚元素：
例
var x = document.getElementsByTagName("a")[0]; x.setAttribute("href", "https://www.baidu.com/css3/");
同样，可以使用setAttribute( )方法来更新或更改HTML元素上现有属性的值。
例
document.getElementsByTagName("input")[0].setAttribute("type", "text");完整代码：
<!DOCTYPE html> <html> <title>项目</title> <body style="background-color: aqua;"> <p>单击按钮可将输入按钮更改为输入字段:</p> <input type="button" onclick="myFunc(this)" value="Click me"> <script> function myFunc(x) { x.setAttribute("type", "text"); } </script> </body> </html>
removeAttribute()方法用于从指定元素中删除属性。
本示例从锚元素中移除href属性：
document.getElementsByTagName("a")[0].removeAttribute("href");
看完上述内容，你们对JavaScript中htmldom 元素的作用是什么有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
