当前位置:网站首页>Dom 操作
Dom 操作
2022-07-06 11:35:00 【wangatong】
用Id
var a = document.getElementById("id 名")
用 class取到的是数组
var a = documen.getElementsByClassName("class 名")
用标签获取到的是数组
var a = document.getElementsByTagName ("标签名")
用 name取到的是数组
var a = document.getElementsByName( "name名" )
用选择符querySelectorAll
document.querySelector("p");
事件
onmouseover,onmouseout,onclick,
修改样式
a.style.
Document:根节点
parentNode: 获取父节点
childNodes: 获取所有的子节点
firstChild:第一个子节点
lastChild:最后一个子节点
<p id="p1" class="p1">点击</p>
<div id="div1"></div>
<script>
// let p = document.getElementById('p1') //id
// let p = document.querySelector("#p1")
// let p = document.querySelectorAll("#p1")[0]
// let p = document.getElementsByTagName("p")[0] //标签
let p = document.getElementsByClassName('p1')[0] //class类
p.onclick = function(){
console.log(111)
}
p.onmouseover = function(){
console.log(222)
}
p.onmouseout = function(){
console.log(333)
}
let div = document.createElement("p") //创建元素节点
let content = "dfsfsdfsf"
let txt = document.createTextNode(content) //创建文本节点
div.appendChild(txt) //添加子节点
let div1 = document.getElementById("div1")
div1.appendChild(div)
// div1.removeChild(div) //移除节点
let val = div.parentNode.getAttribute("id") //获取父节点,获取属性值
// alert(val)
div.parentNode.setAttribute("name","12") //设置属性
// prompt("What's your name?", "Default")
// var re = confirm("要进行删除操作吗?");
// if(re == false){
// console.log('false')
// }else{
// console.log('true')
// }
console.log(navigator.language)
console.log(document.title)
console.log(document.head)
</script>
边栏推荐
- MRO工业品企业采购系统:如何精细化采购协同管理?想要升级的工业品企业必看!
- Interface test tool - postman
- 驼峰式与下划线命名规则(Camel case With hungarian notation)
- IC设计流程中需要使用到的文件
- Low CPU load and high loadavg processing method
- Carte de réflexion + code source + notes + projet, saut d'octets + jd + 360 + tri des questions d'entrevue Netease
- Excel 中VBA脚本的简单应用
- An error occurs when installing MySQL: could not create or access the registry key needed for the
- Leetcode 30. 串联所有单词的子串
- It's super detailed in history. It's too late for you to read this information if you want to find a job
猜你喜欢
面试突击63:MySQL 中如何去重?
Documents to be used in IC design process
A method of removing text blur based on pixel repair
如何自定义动漫头像?这6个免费精品在线卡通头像生成器,看一眼就怦然心动!
时钟轮在 RPC 中的应用
Swiftui game source code Encyclopedia of Snake game based on geometryreader and preference
Black Horse - - Redis Chapter
反射及在运用过程中出现的IllegalAccessException异常
Mathematical knowledge -- code implementation of Gaussian elimination (elementary line transformation to solve equations)
Graffiti intelligence is listed on the dual main board in Hong Kong: market value of 11.2 billion Hong Kong, with an annual revenue of 300 million US dollars
随机推荐
今日直播 | “人玑协同 未来已来”2022弘玑生态伙伴大会蓄势待发
业务与应用同步发展:应用现代化的策略建议
中缀表达式转后缀表达式详细思路及代码实现
1805. 字符串中不同整数的数目
C language daily practice - day 22: Zero foundation learning dynamic planning
Druid 数据库连接池 详解
How to access localhost:8000 by mobile phone
【翻译】供应链安全项目in-toto移至CNCF孵化器
Swagger2 reports an error illegal DefaultValue null for parameter type integer
R language uses rchisq function to generate random numbers that conform to Chi square distribution, and uses plot function to visualize random numbers that conform to Chi square distribution
黑马--Redis篇
tensorflow和torch代码验证cuda是否安装成功
安装Mysql报错:Could not create or access the registry key needed for the...
通俗的讲解,带你入门协程
倒计时2天|腾讯云消息队列数据接入平台(Data Import Platform)直播预告
JDBC details
学习探索-无缝轮播图
Mathematical knowledge -- code implementation of Gaussian elimination (elementary line transformation to solve equations)
Detailed idea and code implementation of infix expression to suffix expression
Modulenotfounderror: no module named 'PIL' solution