【web前端初级课程】第七章 你所不知道的DOM编程
2023-09-11 14:20:23 时间
目录
一、如何获取document对象
二、操作dom对象的内容
三、修改dom对象的属性
四、操作dom对象的样式
一、如何获取document对象
DOM:document object model 文件对象模型
他是window对象的子对象,我们可以同使用document对象对页面上的标签进行各种操作。
(一)通过id获取标签
<div class="div_class" id="first_div">我是div</div>
<script>
let div = document.getElementById("first_div")
console.log(div)
</script>
(二)通过标签类型获取标签
let div = document.getElementsByTagName('div')
div[0].innerHTML = "111111"
console.log(div)
(三)通过class来获取标签
let div = document.getElementsByClassName("div_class")[0]
div.innerHTML = "4444"
(四)用选择器来获取标签
let li = document.querySelector("ul > li")
console.log(li)
(五)通过选择器表达式获取所有符合表达式的标签
let li = document.querySelector("ul > li")
console.log(li)
二、操作dom对象的内容
(一)给dom对象插入新的标签或文本
let div = document.getElementById("first_div")
div.innerHTML = "<h2>这是个标题1</h2>"
注意:1、权限管理 符合权限的群体才可以使用innerHTML;
2、必须做过滤,检查插入的内容是否包含恶意代码。
(二)给dom对象插入文本内容(不能插入标签)
1、div.innerText = "<h2>这是个标题1</h2>"
(innerText非w3c规范)
2、div.textContent = "<h3>这是个标题1</h3>"
(textContent是w3c规范,推荐的属性)
三、修改dom对象的属性
(一)标签.属性名
let div = document.getElementById("first_div")
console.log(div.title)
div.title = "123321"
(二)标签[‘属性名称’]
console.log(div['title'])
div['title'] = "8888"
console.log(div['title'])
(三)对应修改
let title = div.getAttribute("title")
console.log(title)
div.setAttribute("title","3333")
console.log(div.getAttribute("title"))
之后该样式可以直接这样:div.style.background = "url('pic/衣服.jpg')"
div.style.width = "400px"
四、操作dom对象的样式
(一)直接使用标签.style (只能获取到行内样式)
let li_arr = document.querySelectorAll("ul > li:nth-child(odd)")
console.log(li_arr)
for (item of li_arr){
item.style.border = "1px solid red"
}
let div = document.getElementById("first_div")
PS:offsetwidth包含边框的宽度 offsetheight包含边框的高度
(二)使用getComputedStyle(能获取到标签所有样式)
console.log(getComputedStyle(div).width)
div.style.width = parseInt(getComputedStyle(div).width) + 5 + "px"
div.style.height = parseInt(getComputedStyle(div).height) + 5 + "px"
div.style.width = div.offsetWidth + "px"
都看到这里了,创作不易,大家点个赞再走呗!!- ̗̀(๑ᵔ⌔ᵔ๑)
相关文章
- web.xml中load-on-startup的作用
- 【WEB前端】web前端获取的long长整型字段精度丢失问题,解决方案?
- 深入HTML5 Web Worker应用实践:多线程编程
- 《ASP.NET MVC4 WEB编程》学习笔记------Model模型绑定
- Web 开发中 20 个很有用的 CSS 库 - WEB开发者
- loadrunner12.55:常用函数汇总说明之Web Vuser Functions(WEB)参数函数
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- [sharepoint]Office Web Apps for SharePoint 2010
- Netkiller Linux Web 手札
- DASCTF2022 ——十月赛 Web 部分Writeup
- 机器学习笔记 - 使用Flask框架构建ML模型的Web应用程序
- 字节,字符,Unicode及Web编码
- Atitit.跨语言标准化 web cgi api v2 saa CGI (通用网关接口) 编辑 CGI 是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能。CG
- Atitit web 之道 艾龙著 Atitit web 之道 艾龙艾提拉著v2 saa.docx 1. 第1章 Web编程基础知识 (1)3 1.1. 1.1 什么是Web (1)3 1.2.
- Atitit.web三大编程模型 Web Page Web Forms 和 MVC
- Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结
- 当Web服务需要传递多个参数时的处理方法
- 软件测试技术之可用性测试之WhatsApp Web
- python+selenium基于po模式的web自动化测试框架 | 干货
- 【Web测试】各类web控件测试点汇总,软测人必备
- 从零实现Web框架Geo教程-前缀树路由-03