前端学习笔记-22-浏览器中的DOM操作
2024-04-04 01:36:52
DOM操作
查找标签
直接查找
""" id查找 类查找 标签查找 """ # 注意三个方法的返回值是不一样的 document.getElementById('d1')document.getElementsByClassName('c1') HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollectiondocument.getElementsByTagName('div') HTMLCollection(3) [div#d1, div, div, d1: div#d1]let divEle = document.getElementsByTagName('div')[1] divEle <div>div>div</div>
效果，其他以此类推
间接查找
let pEle = document.getElementsByClassName('c1')[0] # 注意是否需要索引取值pEle.parentElement # 拿父节点 let divEle = document.getElementById('d1') divEle.children # 获取所有的子标签 divEle.children[0]divEle.firstElementChild <div>div>div</div>divEle.lastElementChild <p>div>p</p>divEle.nextElementSibling # 同级别下面第一个 <div>div下面div</div>divEle.previousElementSibling # 同级别上面第一个 <div>div上面的div</div>
效果(其他以此类推)
节点操作
"""
通过DOM操作动态的创建img标签
并且给标签加属性
最后将标签添加到文本中
"""
let imgEle = document.createElement('img') # 创建标签imgEle.src = 'A.png' # 给标签设置默认的属性
imgEleimgEle.username = '资本家' # 自定义的属性没办法点的方式直接设置imgEleimgEle.setAttribute('username','jason') # 既可以设置自定义的属性也可以设置默认的书写
undefined
imgEle
<img src="111.png" username="jason">
imgEle.setAttribute('title','一张图片')
imgEle
<img src="111.png" username="jason" title="一张图片">let divEle = document.getElementById('d1')
undefined
divEle.appendChild(imgEle) # 标签内部添加元素(尾部追加)
<img src="111.png" username="资本家" title="一张图片">"""
创建a标签
设置属性
设置文本
添加到标签内部添加到指定的标签的上面
"""
let aEle = document.createElement('a')aEle
<a></a>
aEle.href = 'https://www.mzitu.com/'
"https://www.mzitu.com/"
aEle
<a href="https://www.mzitu.com/"></a>aEle.innerText = '点我有你好看!' # 给标签设置文本内容
"点我有你好看!"
aEle
<a href="https://www.mzitu.com/">点我有你好看!</a>
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle) # 添加标签内容指定位置添加
<a href="https://www.mzitu.com/">点我有你好看!</a>"""
额外补充appendChild()removeChild()replaceChild()setAttribute() 设置属性getAttribute() 获取属性removeAttribute() 移除属性
"""# innerText与innerHTML
divEle.innerText # 获取标签内部所有的文本
"div 点我有你好看!
div>p
div>span"divEle.innerHTML # 内部文本和标签都拿到
"div<a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div>p</p><span>div>span</span>"divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerHTML = 'hahahaha'
"hahahaha"divEle.innerText = '<h1>heiheihei</h1>' # 不识别html标签
"<h1>heiheihei</h1>"
divEle.innerHTML = '<h1>hahahaha</h1>' # 识别html标签
"<h1>hahahaha</h1>"
效果(其他以此类推)
获取值操作
# 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.valuelet inputEle = document.getElementById('d1')
inputEle.value# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value # 无法获取到文件数据
"C:\fakepath\02_测试路由.png"fileEle.files
FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileListfileEle.files[0] # 获取文件数据
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}
class、css操作
let divEle = document.getElementById('d1')
undefined
divEle.classList # 获取标签所有的类属性
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]divEle.classList.remove('bg_red') # 移除某个类属性
undefineddivEle.classList.add('bg_red') # 添加类属性
undefined
divEle.classList.contains('c1') # 验证是否包含某个类属性
true
divEle.classList.contains('c2')
falsedivEle.classList.toggle('bg_red') # 有则删除无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true# DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"
前端学习笔记-22-浏览器中的DOM操作相关推荐
- Linux学习笔记-标准库中的管道操作
目录 理论 例子 理论 stdio.h里面有标志库管道操作 FILE *popen(const char* cmdstring, const char *type);返回值:成功返回文件指针,出错返回 ...
- 技术胖前端学习路线学习笔记【更新中】
文章目录 技术胖前端学习路线学习笔记 1. 网络知识 2. 超文本标记语言(HTML) 3.层叠样式表(CSS) 4.浏览器脚本语言(JavaScript) 5.版本控制管理系统Version Con ...
- JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作 文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
- Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- 前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...
- Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)
文章目录 前言 一.Vue是什么? 二.前端核心分析 1.1.概述 1.2.前端三要素 1.3.结构层(HTML) 1.4.表现层(CSS) 1.5.行为层(JavaScript) 二.前端发展史 2 ...
- Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
- vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
- 前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
最新文章
- 日志分析logstash插件-grok详解
- Ubuntu18.04安装Intel® oneAPI Toolkit
- MySQL查询的进阶操作--条件查询
- python: Failed calling sys.__interactivehook__ (Windows)
- android按下enter键如何让光标跳到下一个edittext,我们如何知道光标已经移动到edittext的下一行android...
- 虚拟化服务器监控,监控服务器虚拟化软件
- 安卓APP_ 控件（6）—— Notification通知
- 归并排序 java_归并排序（Java实现）
- Java嵌入oracle,Java插入Oracle Spatial空间数据
- java 获取classpath下文件多种方式
- python编程狮app题库_Python编程狮-零基础学Python App Storessa
- [转]C#加密解密源码
- Java和C长期霸权结束
- Adobe Reader 下载
- php 批量 挂马,php下批量挂马和批量清马代码
- 十大热门经典历史小说，大有希望获得第四届橙瓜网络文学奖
- 如何学会学习——读唐老师博文有感
- python高级数据筛选的方法_使用python对多个txt文件中的数据进行筛选的方法
- macsv服务器状态,macsv操作员站下装过程及服务器下装过程备课讲稿.pdf
- 数据科学入门前需要知道的10件事