当前位置:网站首页>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>
边栏推荐
- Mysql Information Schema 学习(一)--通用表
- [translation] a GPU approach to particle physics
- Carte de réflexion + code source + notes + projet, saut d'octets + jd + 360 + tri des questions d'entrevue Netease
- 安装Mysql报错:Could not create or access the registry key needed for the...
- A method of removing text blur based on pixel repair
- 反射及在运用过程中出现的IllegalAccessException异常
- 【计算情与思】扫地僧、打字员、信息恐慌与奥本海默
- Mysql Information Schema 學習(一)--通用錶
- How to do smoke test
- First day of rhcsa study
猜你喜欢
A popular explanation will help you get started
Carte de réflexion + code source + notes + projet, saut d'octets + jd + 360 + tri des questions d'entrevue Netease
Solution of commercial supply chain management platform for packaging industry: layout smart supply system and digitally integrate the supply chain of packaging industry
理解 YOLOV1 第二篇 预测阶段 非极大值抑制(NMS)
Countdown 2 days | live broadcast preview of Tencent cloud message queue data import platform
The second day of rhcsa study
MySQL information Schema Learning (i) - - General table
接雨水问题解析
Learn to explore - use pseudo elements to clear the high collapse caused by floating elements
Mathematical knowledge -- code implementation of Gaussian elimination (elementary line transformation to solve equations)
随机推荐
终于可以一行代码也不用改了!ShardingSphere 原生驱动问世
Tensorflow2.0 自定义训练的方式求解函数系数
The slave i/o thread stops because master and slave have equal MySQL serv
USB host driver - UVC swap
学习探索-无缝轮播图
接雨水问题解析
Computer network: sorting out common network interview questions (I)
JDBC details
MySQL information Schema Learning (i) - - General table
三面蚂蚁金服成功拿到offer,Android开发社招面试经验
[translation] micro survey of cloud native observation ability. Prometheus leads the trend, but there are still obstacles to understanding the health of the system
Low CPU load and high loadavg processing method
Phoenix Architecture 2 - accessing remote services
350. 两个数组的交集 II
[translation] supply chain security project in toto moved to CNCF incubator
Actf 2022 came to a successful conclusion, and 0ops team won the second consecutive championship!!
Interview assault 63: how to remove duplication in MySQL?
About image reading and processing, etc
A method of removing text blur based on pixel repair
【翻译】数字内幕。KubeCon + CloudNativeCon在2022年欧洲的选择过程