JAVAScript(详细(DOM操作))

最新推荐文章于 2021-11-12 17:54:00 发布

怪咖i！

最新推荐文章于 2021-11-12 17:54:00 发布

阅读量96

点赞数

分类专栏： DOM 详细基础文章标签： javascript dom

本文链接：https://blog.csdn.net/weixin_52231266/article/details/111705819

版权

详细基础同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

DOM

0 篇文章 0 订阅

订阅专栏

JAVAScript中的重要知识点：

今天就来说一下其中的DOM中的重要的操作：
先说一下最基本的操作获取元素：
获取元素对象有五种：

	<!--通过选择器进行元素的查找
				标签选择器    一组元素    document.getElementsByTagName();
				类选择器    一组元素  docment.getElementsByClassName();
				id选择器   一个元素  docment.getElementById();
				通过name属性获取  document.getElementsByName();
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档对象模型</title>
    <!--//通过dom获取元素对象的方法（五种）-->
</head>
<body>
    <div>
        <span>李白</span>
        <span id="libai"></span>
        <span class="bt"></span>
    </div>
    <form action="">
        <input type="text" name="username">
        <input type="text" name="nickname">
        <input type="password" name="pwd">
    </form>
 <!--第一种：通过标签获取元素对象-->
 //方法：getElementsByTagName("元素标签名")
   var spanArr=document.getElementsByTagName("span");

 //        第二种：通过ID获取元素对象
   var span1=document.getElementById("libai");
//        第三种：通过class获取元素对象:一组class对象，所以返回值是数组，那个是一个对象的数组，
        //所以按照数组的处理方式来处理
         var span2=document.getElementsByClassName("bt");
        console.log(span2[0]);
        //        第四种方法：通过name属性来获取元素对象
          var nickarr=document.getElementsByName("nickname");
        	console.log(nickarr[0]);
      //        第五种方式：通过父类元素获取子类元素对象  
      // 先获取父类对象
       var fathertag=document.getElementsByTagName("div")[0];
        var spansarray=fathertag.getElementsByTagName("span");
        console.log(spansarray);

通过DOM获取元素后如何获取其元素的内容及修改样式呢？

获取元素内容

1.通过对象.value这个只能用于获取单标签的元素值

 let hobby = document.getElementsByTagName('div');
 console.log(hobby[0].value);

		那么如何进行赋值呢？
语法：对象.value = 值；

hobby[0].value = "嘿嘿";

单标与双标签获取值是不同的。
语法：对象.innerHTML

 console.log(hobby[0].innerHTML);

赋值：对象.innerHTML = 值；

 hobby[0].innerHTML = "改变后的值";

注意：对象.outerHTML 同样可以获取双标签的值及其对其赋值，但它获取的过程中会获取到元素中的全部包括其包含的子标签。
在JavaScript中，有三种常用的绑定事件的方法：

在DOM元素中直接绑定；
在JavaScript代码中绑定；
绑定事件监听函数。
这里主要说一下
点击事件： onclick(任务)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--点击事件： onclick(任务) -->
<button onclick="showMsg()">showMsg</button>

<script type="text/javascript">
			//定义任务
			function showMsg(){
				alert("haha");
			}
		 
		</script>
	</body>
</html>

怪咖i！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVAScript(详细(DOM操作))

JAVAScript中的重要知识点：今天就来说一下其中的DOM中的重要的操作：先说一下最基本的操作获取元素：获取元素对象有五种：  //方法：getElementsByTagName("元素标签名") var spanArr=document.getElementsByTagName("span"); // 第二种：通过ID获取元素对象 var span1=document.getElementById("liba
复制链接

扫一扫