JavaScript中的DOM对象

最新推荐文章于 2023-05-02 22:27:58 发布

影魅夜

最新推荐文章于 2023-05-02 22:27:58 发布

阅读量347

点赞数

分类专栏： JavaScript 文章标签： JS的DOM对象

本文链接：https://blog.csdn.net/yangbiaosb/article/details/99658604

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.DOM对象获得元素标签方式：
   1.直接获得元素标签的方式：id Tagname Name
   通过getElementById获得单个元素标签
   var uname=document.getElementById("username");
   通过getElementsByTagName获得全部元素标签
   var inp=document.getElementsByTagName("input");
   通过getElementsByName获得多个元素标签
   var name=document.getElementsByName("hobby");
   2.间接获得元素标签的方式 childNodes parentNode nextElementSibling previousElementSibling
   var child=sel.childNodes; 空白文档也是一个子节点
   var parent=opt.parentNode;
   var nex2=opt.nextElementSibling;
   var pre2=opt.previousElementSibling;

二.DOM对象获得操作元素属性：
   1.获得元素属性
               方式一:由节点元素标签获得属性(属性的即时值)
               var va=inp1.value;
               方式二：由节点元素标签获得属性(属性的默认值
               var ty2=inp1.getAttribute("type");

   2.操作元素属性：
   方式一:inp1.type="button";
   方式二：inp1.setAttribute("type","button");

三,DOM对象获得操作元素样式：
   1.获得元素标签样式：通过标签元素名.style.width
   2.操作元素标签样式：方式一：改变元素标签样式:直接修改
   元素标签名.style.width="300px"
   方式二：改变元素标签样式：通过增加class类来增加对应的css样式注意：className
div1.className="div2";

四.DOM对象获得操作文本内容：
   1.innerHTML会获得HTML内容 innerHTML添加时会解析内容
   2.innerText会获得纯文本内容 innerText添加时直接添加所有内容
   3.单标签：获得的时候都是用value获得
   4.特殊的标签：select、textarea 用value获得

五.DOM对象操作元素标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			function addNodes(){
				/*1.创建p元素标签*/
				var p=document.createElement("p");
				/*增加p标签的文本内容：照片*/
				p.innerText="照片:";
				/*增加p标签的input标签*/
				var input1=document.createElement("input");
				/*给input标签增加属性*/
				input1.type="file";
				var input2=document.createElement("input");
				input2.type="button";
				input2.value="删除";
				
				/*2.获取表单标签，把p标签添加到表单标签*/
				var fom=document.getElementById("fom");
				/*fom.appendChild(p);
				p.appendChild(input1);
				p.appendChild(input2);*/
				
				
				/*3.获得最后一个p标签，使添加的标签在它前面*/
				var lastNode=document.getElementById("lastNode");
				fom.insertBefore(p,lastNode);
				p.appendChild(input1);
				p.appendChild(input2);
				
				
				/*4.实现删除标签元素操作*/
				input2.onclick=function(){
					/*移除p下的子节点*/
					p.removeChild(input1);
					p.removeChild(input2);
					/*移除节点本身*/
					p.remove();
				}
				
			}
			
			
		</script>
	
	</head>
	<body>
		
		<form id="fom">
			
			<p>
				用户名：<input type="text" id="" value="" />
			</p>
			
			<p>
				照片:<input type="file"  />
				<input type="button" value="添加" onclick="addNodes()"/>
			</p>
			
			<p id="lastNode">
				<input type="button"  value="提交" />
				<input type="button"  value="清空" />
			</p>
			
			
		</form>
	</body>
</html>

影魅夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的DOM对象

一.DOM对象获得元素标签方式： 1.直接获得元素标签的方式：id Tagname Name 通过getElementById获得单个元素标签 var uname=document.getElementById("username");...
复制链接

扫一扫

专栏目录