JS中dom的操作元素：
内容：
element.innerText = " " ——不能识别html标签
element.innerHtml = " "
案例：
#aa{
width: 100px;
height: 50px;
border: 1px solid grey;
text-align: center;
line-height: 50px;
border-radius: 5px;
background-color: aquamarine;
color: #0000FF;
}
#aa:hover{
cursor: pointer;
}
<div id="aa">
点击
</div>
<p class=""></p>
<div id="txt">
这是内容区域
这是内容区域
这是内容区域
这是内容区域
这是内容区域
</div>
var aa = document.querySelector("#aa")
var txt = document.querySelector("#txt")
aa.onclick = function(){
txt.innerHTML = "<p>我是新内容我是新内容<br>我是新内容我是新内容<p>"
txt.innerText = "我是新内容我是新内容<br>我是新内容我是新内容" -——加《br》没用
属性：
1、src ——img.src = " "
案例：
#aa{
width: 100px;
height: 50px;
border: 1px solid grey;
text-align: center;
line-height: 50px;
border-radius: 5px;
background-color: aquamarine;
color: #0000FF;
}
#aa:hover{
cursor: pointer;
}
<div id="aa">
点击
</div>
<img src="123.jpg" width="300" height="200">
var aa = document.getElementById("aa")
var img = document.getElementsByTagName("img")
aa.onclick = function(){
//img[0].src = "234.jpg"
2、href
案例：
#aa{
width: 100px;
height: 50px;
border: 1px solid grey;
text-align: center;
line-height: 50px;
border-radius: 5px;
background-color: aquamarine;
color: #0000FF;
}
#aa:hover{
cursor: pointer;
}
<div id="aa">
点击
</div>
<a href="https://www.baidu.com">跳转到百度</a>
var aa = document.getElementById("aa")
var img = document.getElementsByTagName("img")
var aaa = document.querySelector("a") //选取的是第一个元素
aa.onclick = function(){
aaa.href = "https://www.apple.com.cn"
}
3、class
案例：
#aa{
width: 100px;
height: 50px;
border: 1px solid grey;
text-align: center;
line-height: 50px;
border-radius: 5px;
background-color: aquamarine;
color: #0000FF;
}
#aa:hover{
cursor: pointer;
}
.a1{
width: 200px;
height: 200px;
background-color: red;
}
.a2{
width: 300px;
height: 300px;
background-color: #0000FF;
border-radius: 20px;
}
<div id="aa">
点击
</div>
<div class="a1"></div>
var aa = document.getElementById("aa")
var a1 = document.getElementsByClassName("a1")
aa.onclick = function(){
a1[0].className = "a2"
}
重点：Elements 下面点击中一定要加[0]
4、表单：
type：
案例：
<input id="inp" type="text"/>
var aa = document.getElementById("aa")
var inp = document.getElementById("inp")
aa.onclick = function(){
//inp.type = "password"
value ——input.value = " "
案例：
<input type="radio" name="sex" id="nan" value="" />男
<input type="radio" name="sex" id="nv" value="" />女
var aa = document.getElementById("aa")
var inp = document.getElementById("inp")
aa.onclick = function(){
inp.value ="abcdefg"
checked ——input.checked = true
案例：
<input type="checkbox" name="" id="" value="" />北京
<input type="checkbox" name="" id="" value="" />上海
<input type="checkbox" name="" id="" value="" />南京
var nv = document.getElementById("nv")
//nv.checked = "checked" //选中
selected
案例：
<select name="" id="sel">
<option value="">北京</option>
<option value="">上海</option>
<option value="">南京</option>
</select>
var sel = document.getElementById("sel")
disabled
案例：
<input id="inp" type="text"/>
var inp = document.getElementById("inp")
//inp.disabled = true //"disabled" //不可用属性
