使用dom添加样式

最新推荐文章于 2024-06-30 10:06:58 发布

2201_75359473

最新推荐文章于 2024-06-30 10:06:58 发布

阅读量806

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/2201_75359473/article/details/131462176

版权

1.认识DOM

DOM：文档对象模型（Document Object Model）,将页面所有的内容表示为可以修改的对象；

浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作：

学习DOM，就是在学习如何通过JavaScript对文档进行操作的

DOM相当于是JavaScript和HTML、CSS之间的桥梁

通过浏览器提供给我们的DOM API，我们可以对元素以及其中的内容做任何事情

document对象

Document节点表示的整个载入的网页，它的实例是全局的document对象：

对DOM的所有操作都是从 document 对象开始的；

它是DOM的入口点，可以从document开始去访问任何节点元素；

document获取元素

对于最顶层的html、head、body元素，我们可以直接在document对象中获取到：

html元素： <html>= document.documentElement
body元素： <body>= document.body
head元素： <head> = document.head
文档声明： <!DOCTYPE html> = document.doctype

querySelector

console.log(document.querySelector("#id"))
console.log(document.querySelector(".id"))
console.log(document.querySelector("id"))

getElementBy*

console.log(document.doctype)
// 取出body的第二个孩子children
console.log(document.body.children[1])
//根据标签名找，多个标签时返回数组
console.log(document.getElementsByTagName("div"))
//根据id找
console.log(document.getElementById("id"))
// 根据class名字取找
console.log(document.getElementsByClassName("class"))

**querySelector和getElementBy*的区别**

getElementBy以数组形式获取值，从第一个元素开始，获取全部。querySelector只获取遇到的第一个元素，querySelectorALL获取全部，也是输出数组。

样式修改

keywordEls[0].style.color = "red"

内容修改

innerHTML 属性

将元素中的 HTML 获取为字符串形式

innerText属性

仅仅获取元素中的文本内容

动态修改css元素

在CSS中编写好对应的样式，动态的添加class（推荐）

修改className属性
elem.classList.add (class) ：添加一个类
elem.classList.remove(class)：添加/移除类
elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它。

操作元素

创建元素

document.createElement("table")

插入

node.append(...nodes or strings) —— 在 node 末尾插入节点或字符串
node.prepend(...nodes or strings) —— 在 node 开头插入节点或字符串
node.before(...nodes or strings) —— 在 node 前面插入节点或字符串
node.after(...nodes or strings) —— 在 node 后面插入节点或字符串，

移除

elem.remove

<style>
	td {
		width: 20px;
		height: 10px;
		border: 1px solid red;
	}
</style>

<script>
	let a = document.getElementsByClassName("a213")
	console.log(a)
	function chuangjian() {
		let text = document.getElementsByClassName("text")
		let tr = document.createElement("tr");
		let td = document.createElement("td");
		a[0].append(tr)
		td.innerHTML = text[0].value
		tr.append(td)
	}
</script>

<button onclick="chuangjian()">按钮</button>
	<input type="text" class="text">
	<div class="box">
		<table class="a213">
		</table>
	</div>

2201_75359473

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用dom添加样式

querySelector只获取遇到的第一个元素，querySelectorALL获取全部，也是输出数组。DOM：文档对象模型（Document Object Model）,将页面所有的内容表示为可以修改的对象；html元素： <html>= document.documentElement。通过浏览器提供给我们的DOM API，我们可以对元素以及其中的内容做任何事情。它是DOM的入口点，可以从document开始去访问任何节点元素；对DOM的所有操作都是从 document 对象开始的；
复制链接

扫一扫