当前位置:网站首页>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>
边栏推荐
- [translation] micro survey of cloud native observation ability. Prometheus leads the trend, but there are still obstacles to understanding the health of the system
- A method of removing text blur based on pixel repair
- LeetCode_ Double pointer_ Medium_ 61. rotating linked list
- 思維導圖+源代碼+筆記+項目,字節跳動+京東+360+網易面試題整理
- Using clip path to draw irregular graphics
- Detailed idea and code implementation of infix expression to suffix expression
- Characteristic colleges and universities, jointly build Netease Industrial College
- Lick the dog until the last one has nothing (simple DP)
- 【翻译】云原生观察能力微调查。普罗米修斯引领潮流,但要了解系统的健康状况仍有障碍...
- LeetCode_格雷编码_中等_89.格雷编码
猜你喜欢
Intelligent supply chain management system solution for hardware and electromechanical industry: digital intelligent supply chain "creates new blood" for traditional industries
利用 clip-path 绘制不规则的图形
Swiftui game source code Encyclopedia of Snake game based on geometryreader and preference
力扣101题:对称二叉树
Phoenix Architecture 3 - transaction processing
Problems encountered in using RT thread component fish
史上超级详细,想找工作的你还不看这份资料就晚了
Low CPU load and high loadavg processing method
潇洒郎: AttributeError: partially initialized module ‘cv2‘ has no attribute ‘gapi_wip_gst_GStreamerPipe
Synchronous development of business and application: strategic suggestions for application modernization
随机推荐
Hudi vs Delta vs Iceberg
Php+redis realizes the function of canceling orders over time
【基础架构】Flink/Flink-CDC的部署和配置(MySQL / ES)
It's super detailed in history. It's too late for you to read this information if you want to find a job
Spark foundation -scala
usb host 驱动 - UVC 掉包
map的使用(列表的数据赋值到表单,json逗号隔开显示赋值)
PMP practice once a day | don't get lost in the exam -7.6
About image reading and processing, etc
如何自定义动漫头像?这6个免费精品在线卡通头像生成器,看一眼就怦然心动!
short i =1; i=i+1与short i=1; i+=1的区别
[translation] Digital insider. Selection process of kubecon + cloudnativecon in Europe in 2022
Synchronous development of business and application: strategic suggestions for application modernization
凤凰架构2——访问远程服务
How to do smoke test
GCC【7】- 编译检查的是函数的声明,链接检查的是函数的定义bug
数学知识——高斯消元(初等行变换解方程组)代码实现
Learning and Exploration - Seamless rotation map
Zero foundation entry polardb-x: build a highly available system and link the big data screen
LeetCode_双指针_中等_61. 旋转链表