当前位置:网站首页>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>
边栏推荐
- Leetcode topic [array] - 119 Yang Hui triangle II
- 算法面试经典100题,Android程序员最新职业规划
- Teach you to learn JS prototype and prototype chain hand in hand, a tutorial that monkeys can understand
- It's super detailed in history. It's too late for you to read this information if you want to find a job
- Mysql Information Schema 學習(一)--通用錶
- Interpretation of Dagan paper
- Learn to explore - use pseudo elements to clear the high collapse caused by floating elements
- 潇洒郎: AttributeError: partially initialized module ‘cv2‘ has no attribute ‘gapi_wip_gst_GStreamerPipe
- Mind map + source code + Notes + project, ByteDance + JD +360+ Netease interview question sorting
- 思維導圖+源代碼+筆記+項目,字節跳動+京東+360+網易面試題整理
猜你喜欢

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

It's super detailed in history. It's too late for you to read this information if you want to find a job

Leetcode 30. 串联所有单词的子串

Using clip path to draw irregular graphics

JDBC details

Hudi vs Delta vs Iceberg

Learn to explore - use pseudo elements to clear the high collapse caused by floating elements
![Fast power template for inverse element, the role of inverse element and example [the 20th summer competition of Shanghai University Programming League] permutation counting](/img/dd/c3f4a9c38b156e3a9b9adfd6253773.gif)
Fast power template for inverse element, the role of inverse element and example [the 20th summer competition of Shanghai University Programming League] permutation counting

Computer network: sorting out common network interview questions (I)

思維導圖+源代碼+筆記+項目,字節跳動+京東+360+網易面試題整理
随机推荐
Benefit a lot, Android interview questions
时钟轮在 RPC 中的应用
通俗的讲解,带你入门协程
Using clip path to draw irregular graphics
Mysql Information Schema 学习(二)--Innodb表
English topic assignment (25)
GCC【7】- 编译检查的是函数的声明,链接检查的是函数的定义bug
Low CPU load and high loadavg processing method
Intelligent supply chain management system solution for hardware and electromechanical industry: digital intelligent supply chain "creates new blood" for traditional industries
终于可以一行代码也不用改了!ShardingSphere 原生驱动问世
从sparse.csc.csr_matrix生成邻接矩阵
思维导图+源代码+笔记+项目,字节跳动+京东+360+网易面试题整理
Documents to be used in IC design process
1805. 字符串中不同整数的数目
Interview assault 63: how to remove duplication in MySQL?
【pytorch】yolov5 训练自己的数据集
Detailed idea and code implementation of infix expression to suffix expression
How to type multiple spaces when editing CSDN articles
About image reading and processing, etc
Solution of intelligent management platform for suppliers in hardware and electromechanical industry: optimize supply chain management and drive enterprise performance growth