当前位置:网站首页>DOM operation
DOM operation
2022-07-06 19:36:00 【wangatong】
use Id
var a = document.getElementById("id name ")
use class What you get is an array
var a = documen.getElementsByClassName("class name ")
What you get with the tag is an array
var a = document.getElementsByTagName (" Tag name ")
use name What you get is an array
var a = document.getElementsByName( "name name " )
With selector querySelectorAll
document.querySelector("p");
event
onmouseover,onmouseout,onclick,
Modify the style
a.style.
Document: The root node
parentNode: Get parent node
childNodes: Get all children
firstChild: First child node
lastChild: The last child node
<p id="p1" class="p1"> Click on </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] // label
let p = document.getElementsByClassName('p1')[0] //class class
p.onclick = function(){
console.log(111)
}
p.onmouseover = function(){
console.log(222)
}
p.onmouseout = function(){
console.log(333)
}
let div = document.createElement("p") // Create element node
let content = "dfsfsdfsf"
let txt = document.createTextNode(content) // Create text node
div.appendChild(txt) // Add child nodes
let div1 = document.getElementById("div1")
div1.appendChild(div)
// div1.removeChild(div) // Remove node
let val = div.parentNode.getAttribute("id") // Get parent node , Get attribute value
// alert(val)
div.parentNode.setAttribute("name","12") // Set properties
// prompt("What's your name?", "Default")
// var re = confirm(" Delete ?");
// if(re == false){
// console.log('false')
// }else{
// console.log('true')
// }
console.log(navigator.language)
console.log(document.title)
console.log(document.head)
</script>
边栏推荐
- Chic Lang: attributeerror: partially initialized module 'CV2' has no attribute 'GAPI_ wip_ gst_ GStreamerPipe
- 腾讯Android面试必问,10年Android开发经验
- swagger2报错Illegal DefaultValue null for parameter type integer
- LeetCode_格雷编码_中等_89.格雷编码
- Carte de réflexion + code source + notes + projet, saut d'octets + jd + 360 + tri des questions d'entrevue Netease
- Synchronous development of business and application: strategic suggestions for application modernization
- zabbix 代理服务器 与 zabbix-snmp 监控
- [玩转Linux] [Docker] MySQL安装和配置
- English topic assignment (25)
- IC设计流程中需要使用到的文件
猜你喜欢

Countdown 2 days | live broadcast preview of Tencent cloud message queue data import platform

LeetCode_双指针_中等_61. 旋转链表

Mind map + source code + Notes + project, ByteDance + JD +360+ Netease interview question sorting

利用 clip-path 绘制不规则的图形

Don't miss this underestimated movie because of controversy!

Black Horse - - Redis Chapter

学习探索-使用伪元素清除浮动元素造成的高度坍塌

A full set of teaching materials, real questions of Android interview of 7 major manufacturers including Alibaba Kwai pinduoduo

在解决了 2961 个用户反馈后,我做出了这样的改变...

LeetCode-1279. 红绿灯路口
随机推荐
Dark horse -- redis
A method of removing text blur based on pixel repair
手把手教你学会js的原型与原型链,猴子都能看懂的教程
Mysql Information Schema 学习(二)--Innodb表
LeetCode_ Gray code_ Medium_ 89. Gray code
中缀表达式转后缀表达式详细思路及代码实现
Leetcode topic [array] - 119 Yang Hui triangle II
Translation D28 (with AC code POJ 26:the nearest number)
MySQL information schema learning (I) -- general table
三面蚂蚁金服成功拿到offer,Android开发社招面试经验
全套教学资料,阿里快手拼多多等7家大厂Android面试真题
Druid 数据库连接池 详解
USB host driver - UVC swap
Problems encountered in using RT thread component fish
How to type multiple spaces when editing CSDN articles
How to access localhost:8000 by mobile phone
接雨水问题解析
Teach you to learn JS prototype and prototype chain hand in hand, a tutorial that monkeys can understand
Mysql Information Schema 学习(一)--通用表
GCC [7] - compilation checks the declaration of functions, and link checks the definition bugs of functions