js的dom对象及elements对象

最新推荐文章于 2024-03-28 23:52:10 发布

qq_36594703

最新推荐文章于 2024-03-28 23:52:10 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_36594703/article/details/76974241

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了DOM（文档对象模型）的基本概念及如何使用JavaScript操作HTML文档。包括document对象的使用方法如write(), getElementById(), getElementsByTagName()等，以及如何通过这些方法获取和修改网页元素。

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

js的dom对象

dom:文档对象模型

文档：超文本标记文档html xml

对象：属性和方法

模型：使用属性和方法操作超文本标记文档

可以使用dom提供的对象，使用这些对象的属性和方法对标记性文档进行操作

需要吧html里面的标签，属性，文本内容都封装成对象

要想对标记本文进行操作，要解析标记性文档使用dom解析html只能有一个根节点，在根节点下可有多个子节点，没有子节点的称为叶子节点。
根据hmtl层次结构，会在内容中分配一个树形结构

document对象：整个html文档

element对象：标签对象

属性对象：id

文本对象

Node节点对象：是这些对象的父对象

解析过程

根据html层级结构，在内存中分配一个树形结构，吧html中各部分封装成对象

DHTML：是很多技术的简称html css dom js,dom操作html文档

document对象：整个文档

write()：向页面输出变量，html代码

getElementById()：通过id得到标签元素

<body>
  <span id="spanid">aaaaa</span>
  <input type="text" name="nameid" value="aaa"/>
<hr/>
	<script type="text/javascript">
	var str="abc";
	document.write(str);
	document.write("<hr/>");
	//使用getElementById()得到input标签
	var input1=document.getElementById("nameid");
	//得到input里面的value值
	alert(input1.value);
	//想input里设置一个值
	input1.value="bbbbb";
	
	</script>

getElementsByName()：通过标签的name的属性值来得到标签，返回的是一个集合（数组）

<body>
  <input type="text" name="name1" value="aaaa"/><br/>
  <input type="text" name="name1" value="bbbb"/><br/>
  <input type="text" name="name1" value="cccc"/><br/>
  <input type="text" name="name1" value="dddd"/><br/><hr/>

getElementsByTagName()：通过标签名称得到元素，返回的也是数组

<body>
  <input type="text" name="name1" value="aaaa"><br/>
    <input type="text" name="name1" value="bbbb"><br/>
	  <input type="text" name="name1" value="cccc"><br/>
	    <input type="text" name="name1" value="dddd"><br/>
<hr/>
	<script type="text/javascript">
	var inputs=document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++){
		var input1=inputs[i];
		alert(input1.value);
	}
	</script>
</body>