js获取id对应的组件,javascript获取id的值

最新推荐文章于 2023-12-06 23:57:16 发布

gpt886

最新推荐文章于 2023-12-06 23:57:16 发布

阅读量303

点赞数

文章标签：人工智能

本文链接：https://blog.csdn.net/2301_79533350/article/details/134032069

版权

大家好，小编来为大家解答以下问题，js获取id对应的组件，javascript获取id的值，现在让我们一起来看看吧！

通过 id 获取文档元素

第一关：通过 id 获取文档元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get element by id</title>
</head>
<body>
    <a id="a1" src="https://www.google.com">Google</a>
    <p id="p1">this is a text</p>
    <>
    	<!-- 请在此处编写代码 -->
        <!---------Begin--------->
        var myElement = document.getElementById("a1");

        <!---------End--------->
        myElement.href="https://www.educoder.net";
    </>
</body>
</html>

通过类名获取文档元素

第一关：通过类名获取文档元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get element by name</title>
</head>
<body>
    <img src="" class="myName"/>
    <form class="myName" id="myForm"></form>
    <div class="myName">This is quote</div>
    <p class="myName">This is what you should get</p>
    <>
    	<!-- 请在此处编写代码 -->
        <!---------Begin--------->
        var myElement=document.getElementsByTagName('p')[0];

        <!---------End--------->
        myElement.innerText="I changed the text";
    </>
</body>
</html>

通过标签获取文档元素

第一关：通过标签获取文档元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get element by id</title>

</head>
<body>
    <div class="diva">
        <a href="https://www.educoder.net">EduCoder</a>
        <a href="https://www.facebook.com">FaceBook</a>
    </div>
    <div class="divb">
        <a href="https://www.twitter.com">Twitter</a>
        <form name="myForm"></form>
        <a href="https://www.nudt.edu.cn">NUDT</a>
    </div>
    <p id="pp">this is a text</p>
<>
	<!-- 请在此处编写代码 -->
    <!---------Begin--------->
    var myElement=document.getElementsByTagName('div')[1].getElementsByTagName('a')[1];

    <!---------End--------->
    myElement.innerText="nudt";
</>
</body>
</html>

html5 中获取元素的方法一

第一关：html5 中获取元素的方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>你需要获得的元素是我</p>
    <p>是楼上</p>
    <p>是楼上的楼上</p>
    <>
    	<!-- 请在此处编写代码 -->
        <!---------Begin--------->
        var pElement =document.querySelector("body p");

        <!---------End--------->
        console.log(pElement);
    </>
</body>
</html>

html5 中获取元素的方法二

第一关：html5 中获取元素的方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>你需要获得的元素是我</p>
    <p>包括我</p>
    <p>还有我</p>
    <>
    	<!-- 请在此处编写代码 -->
        <!---------Begin--------->
        var pElement =document.querySelectorAll("body");

        <!---------End--------->
        console.log(pElement);
    </>
</body>
</html>

节点树上的操作

第一关：节点树上的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="div1">
	<div class="cl1">
		<p>文本</p>
		<a>超链接</a>
	</div>
	<div class="cl2">
		<select>
			<option>红</option>
			<option>黄</option>
			<option>蓝</option>
		</select>
	</div>
</div>
  <>
      var cl2 = document.getElementById("div1").lastElementChild;
      <!-- 请在此处编写代码 -->
      <!---------Begin--------->
	  myElement = cl2.firstElementChild.children[1];

      <!---------End--------->
      myElement.innerText = "绿";
    </>
</body>
</html>

属性值的获取

第一关：属性值的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p id="p"></p>
    <img class="imgClass"/>
    <a id="a"></a>
    <>
    	<!-- 请在此处编写代码 -->
        <!---------Begin--------->
        var srcValue =document.getElementsByTagName('img')[0].getAttribute("class");

        <!---------End--------->
        console.log(srcValue);
    </>
</body>
</html>

属性值的设置

第一关：属性值的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p id="p"></p>
    <form id="form1" method="get" target="https://abc.xyz/def/ghi">This is form</form>
    <a id="a"></a>
    <>
    	<!-- 请在此处编写代码 -->
        <!---------Begin--------->
        var myElement =document.getElementById('form1').setAttribute('method','post');

        <!---------End--------->
        console.log(document.getElementById("form1").method);
    </>
</body>
</html>

gpt886

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取id对应的组件,javascript获取id的值

大家好，小编来为大家解答以下问题，js获取id对应的组件，javascript获取id的值，现在让我们一起来看看吧！第一关：html5 中获取元素的方法一。第一关：html5 中获取元素的方法二。第一关：通过 id 获取文档元素。第一关：通过类名获取文档元素。第一关：通过标签获取文档元素。第一关：节点树上的操作。第一关：属性值的获取。第一关：属性值的设置。
复制链接

扫一扫