js dom文档对象模型

意思v闭卷考试

已于 2022-05-18 18:14:07 修改

阅读量555

点赞数

文章标签： javascript css 前端

于 2022-05-18 17:37:43 首次发布

本文链接：https://blog.csdn.net/weixin_67339511/article/details/124846965

版权

dom 是文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。

1.dom使用

getElementById()
通过id获取元素
getElementsByTagName()
通过标签名获取节点列表
getElementsByClassName()
通过类名获取节点列表
getElementsByName()
通过名称获取列表
querySelector()
通过css选择器获取节点|
querySelecorAll()
通过css选择器获取节点列表

2.遍历节点

转换为数组Array.from()


//forEach 遍历


var ps =document.querySelectorAll('div p'); //获取‘div’下面‘p’元素

ps.forEach(function(elem){
		console.log(elem);
}) //遍历

3.改变成内容

innertText
获取/改变文本内容
innerHTML
获取/改变html内容

4.获取表单值

value 获取/改变表单的值
checked 修改checkbox 是否勾选

5.通过style修改样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 200px;height: 100px;
				border: 2px solid red;
			}
			
			
		</style>
	</head>
	<body>
		<div id="div">
			你好世界;
		</div>
		<button type="button" onclick="bk()">变宽</button>
		<script type="text/javascript">
			function bk(){
				var div = document.getElementById('div');
				//相当于用js写了行内样式
				div.style.width = '400px';
                //更改 #div css样式里的 width；

				div.style.fontSize='40px'
				//更改 #div css样式里的 font-size；
			}
			
		</script>
	
	</body>
</html>

6.通过classList修改类名，修改样式

toggle()   切换类名
add()       添加类名
remove()   移除类名
contains()   检查是否包含

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.hide {
				display: none;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="a()">添加</button>
		<button type="button" onclick="b()">移除</button>
		<button type="button" onclick="c()">检查</button>
		<button type="button" onclick="toa()">显示或隐藏</button>
		<div id="mydiv">
			学前端月薪过1.5万
		</div>
		<hr >
		<div id="mydiv1" class="hide">
			学前端月薪过1.5万
		</div>
		<script type="text/javascript">
			function toa() {
				var divs = document.getElementById('mydiv');//获取页面元素
				divs.classList.toggle('hide');// 切换类名
			}

			function a() {
				var divs = document.getElementById('mydiv');//获取页面元素
				divs.classList.add('hide');//添加类名
			}

			function b() {
				var divs = document.getElementById('mydiv1');//获取页面元素
				divs.classList.remove('hide');//移除类名
			}

			function c() {
				var divs = document.getElementById('mydiv');//获取页面元素
				var x = divs.classList.contains('hide');//检查是否包含
				console.log(x);
			}
		</script>

	</body>
</html>

意思v闭卷考试

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js dom文档对象模型

dom 是文档对象模型文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。1.dom使用getElementById()通过id获取元素getElementsByTagName()通过标签名获取节点列表getElementsByClassName()通过类名获取节点列表getElementsByName()通过名称获取列表querySelector()通过css选择器获取节点|querySel
复制链接

扫一扫