53 lines
1.6 KiB
HTML
53 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
.box{
|
|
width:100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<p class="newyear" id="niu" name="neo">过年好</p>
|
|
<div id="old">
|
|
ppplolk
|
|
<p>bye 2020</p>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var str=""
|
|
str=document.getElementsByTagName('p')[0] //通过标签获取元素
|
|
// 通过类名获取元素 str=document.getElementsByClassName('newyear')[0].innerHTML
|
|
// 通过id获取元素 str=document.getElementById('niu').innerHTML
|
|
// console.log(str)
|
|
str.innerHTML="新年快乐"
|
|
var attr=str.getAttribute('name') //获取属性
|
|
str.setAttribute('name','tom')
|
|
str.setAttribute('class','demo2')
|
|
// console.log(attr)
|
|
|
|
var oldyear=document.getElementById('old')
|
|
// oldyear.remove()
|
|
// oldyear.parentNode.removeChild(oldyear); 通过父级删自己
|
|
|
|
var val=document.querySelectorAll("#old")
|
|
// document.querySelectorAll("p")
|
|
// document.querySelectorAll(".demo2")
|
|
console.log(val[0].innerHTML)
|
|
var myele=document.createElement('div')
|
|
myele.setAttribute('class','box')
|
|
myele.innerHTML="happy new year"
|
|
// console.log(myele)
|
|
document.body.append(myele)
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |