DMO简介和DOM操作（二）

最新推荐文章于 2024-05-03 11:47:20 发布

CodeYu_

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量973

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Aiolimp/article/details/108351718

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DMO简介和DOM操作（二）

节点的获取、设置和删除
1.获取节点

元素节点.getAttribute（属性名）

2.设置节点

元素节点.setAttribute（属性名，新的属性值）

3.删除节点

元素节点.removeAttribute (属性名)

<body>
		<div id="d1">
			helloWorld
		</div>
		<script type="text/javascript">
			var d1 = document.querySelector("#d1")
			//获取属性值
			console.log(d1.id)
			console.log(d1['id'])
			console.log(d1.getAttribute('id'))
			//设置属性
			d1.id = "d2"
			d1['id'] = "d3"
			//setAttribute("属性名称","属性值")
			d1.setAttribute("id","d4")
			
			d1.abc="789"//默认元素中如果没有此属性，那么此属性只会创建在对象中，不会显示在html上
			console.log(d1)
			console.log([d1])
			
			d1.setAttribute("aaa","666")//默认元素中如果没有此属性，那么此属性不会创建在对象中个，会显示在html上
			console.log(d1)
			console.log([d1])
			//删除子元素
			d1.removeAttribute("abc")
		</script>
	</body>

innerHtml和innerText的区别

value：标签的value属性

	<div id="d1">
			helloword
			<h1>helloword</h1>
			<h1>helloword</h1>
		</div>
		<input type="text" name="username" id="username" value="admin"/>
		<input type="password" name="password" id="password" value="123456"/>
		<script type="text/javascript">
			var usernameInput = document.querySelector('#username')
			var username = usernameInput.value;
			console.log(username)//admin
			var passwordInput = document.querySelector("#password")
			var password = passwordInput.value
			console.log(password)//123456
		</script>

innerHtml：双闭合标签里面的内容（识别标签）
innerText：双闭合标签里面的内容（不识别标签）

<div id="d1">
			helloword
			<h1>helloword</h1>
			<h1>helloword</h1>
		</div>
		<script type="text/javascript">
			var d1 = document.querySelector('#d1')
			//获取的d1内部的html代码
			console.log(d1.innerHTML)
			//获取d1内部的文本内容
			console.log(d1.innerText)
			//获取包含d1的html代码
			console.log(d1.outerHTML)
		</script>

在这里插入图片描述
DOM操作设置元素样式

1.通过style修改属性样式
2.通过className修改属性样式
3.通过增加style标签来修改样式

<div id="d1">
			hello
		</div>
		<div id="d2" >
			hello
		</div>
		<div class="d3" >
			hello
		</div>
		<script type="text/javascript">
			//1.通过style修改属性样式
			var abc1 = document.querySelector('#d1')
			abc1.style.width= "200px";
			abc1.style.height= "200px";
			abc1.style.backgroundColor= "red";//设置css属性时，如果css属性是多个单词组成，则采用驼峰命名法
			//注意：通过style属性设置的值，优先级是最高的，因为是直接修改标签的style属性
			//2.通过className修改属性样式
			var abc2 = document.querySelector('#d2')
			abc2.className = "bg bigFont"
			//类名还可以通过classList属性的add/remove/replace进行修改className
			abc2.classList.add("shaow")
			abc2.classList.replace("bigFont","smallFont")
			abc2.classList.remove("bg")
			//3.通过增加style标签来修改样式
			var style=document.createElement("style")
			//反引号``可以包括多行字符串
			style.innerHTML= `.d3{
				width: 800px;
				height: 800px;
				background-color: orange;
			}
			`
			var body = document.querySelector("body")
			body.appendChild(style)

CodeYu_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DMO简介和DOM操作（二）

DMO简介和DOM操作（二）节点的获取、设置和删除1.获取节点元素节点.getAttribute（属性名）2.设置节点元素节点.setAttribute（属性名，新的属性值）3.删除节点元素节点.removeAttribute (属性名)<body> <div id="d1"> helloWorld </div> <script type="text/javascript"> var d1 = document.q
复制链接

扫一扫