初见DOM

Alfredorw

已于 2023-11-21 02:45:37 修改

阅读量17

点赞数 1

文章标签：前端

于 2023-11-21 02:24:24 首次发布

本文链接：https://blog.csdn.net/2301_80263861/article/details/134493386

版权

DOM

DOM的认知

DOM的认知

文档对象模型
操作页面内容

DOM树

以树状图的形式将标签与标签之间的关系表达出来

DOM对象

这对HTMl生成的JS对象

DOM元素的获取

仅获取第一个元素

document.querySelector (“CSS选择器”)

const 变量名 = document.querySelect("CSS选择器")

document.getElementById(“id”)

在这里插入图片描述

DOM元素的更换

CSS标签.innerHTMl=“更换内容”

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p><script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello world";
  document.write("修改后的题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

效果图
在这里插入图片描述

修改HTMl元素样式

Object.style.property=new style;

Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
 	mychar.style.color="red";
 	mychar.style.backgroundColor ="#ccc";
	mychar.style.width="300px";
  </script>
</body>
</html>

效果图
在这里插入图片描述

显示与隐藏

通过display属性来设置

Object.style.display = value

在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display="none";
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display="block";
		}
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" οnclick="hidetext()" value="隐藏内容" /> 
       <input type="button" οnclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

效果图
在这里插入图片描述

函数返回值类型的修改

object.className = classname

获取元素的class 属性
为网页内的某个元素指定一个css样式来更改该元素的外观

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" οnclick="add()"/>
	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" οnclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className = "one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className = "two";
	   }
	</script>
</body>
</html>

效果图
在这里插入图片描述

Alfredorw

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初见DOM

Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。以树状图的形式将标签与标签之间的关系表达出来。CSS标签.innerHTMl=“更换内容”通过display属性来设置。这对HTMl生成的JS对象。
复制链接

扫一扫