dom操作
document(文档) object(对象) model
增删改查
1.查找
1.1 getElementById()
** **根据id值获取元素,返回符合条件的第一个对象
<div id="aa">demo</div>
<div id="aa">demo1</div>
<p id="aa">bbb</p>
<h3 id="aa">sss</h3>
<div id="pp" class="aa" ds="sc" style="background-color: red;">demo10</div>
var obj=document.getElementById("aa")
console.log(obj)
以文档打印
console.dir(obj)
以对象打印
对象里的属性:
obj.style.background="red"
obj.style.color="yellow"
obj.style.fontSize="80px"
obj.onclick=function(){
alert(1)
}
null-->从上往下进行,先进行外引到这里,没有id为aa的
1.2.getElementsByClassName()
根据class值获取元素,返回所有符合条件的对象组成的数组
<div class="aa">demo</div>
<div class="aa">demo1</div>
<p class="aa">bbb</p>
<h3 class="aa">sss</h3>
var arr=document.getElementsByClassName("aa")
console.log(arr)
对象:
arr[0].style.background="red"
arr[0].style.color="yellow"
arr[0].style.fontSize="80px"
arr[0].onclick=function(){
alert(1)
}
1.3.getElementsByTagName()
根据元素名称获取元素,返回所有符合条件的对象组成的数组
var arr=document.getElementsByTagName("div")
console.log(arr)
console.log(arr.length)
1.4.querySelector()
根据选择器获取元素 (包含选择器...) 返回符合条件的第一个对象
var obj=document.querySelector(".aa")
console.log(obj)
1.5.querySelectorAll()
根据选择器获取元素,返回所有符合条件的对象组成的数组
var arr=document.querySelectorAll(".aa")
console.log(arr)
<p class="cc">ch</p>
<div class="aa">child1
<p class="bb">demo</p>child2
<h3 class="aa">demo2</h3>child3
</div>
<div id="pp" class="aa" ds="sc" style="background-color: red;">demo10</div>
var obj=document.querySelector(".aa")
console.log(obj)
console.log(obj.querySelectorAll("p"))
1.6 通过关系查找
找父亲 parentNode parentElement
找孩子 childNodes children
第一个孩子 firstChild firstElementChild 最后一个孩子 lastChild lastElementChild
找上一个元素 previousSibling previousElementSibling
下一个元素 nextSibling nextElementSibling
<p class="cc">ch</p>
<div class="aa">child1
<p class="bb">demo</p>child2
<h3 class="aa">demo2</h3>child3
</div>
<div id="pp" class="aa" ds="sc" style="background-color: red;">demo10</div>
在这里,第一个孩子是child1
var obj=document.querySelector('.aa')
console.log(obj.firstChild)
2.修改
2.1修改内容
innerHTML属性 把修改的内容给当作标签处理
innerText 把修改的内容当做文本处理
value修改input里的值
<div class="aa">demo1</div>
<input type="text" class="aa" value="你好">
<input type="text" class="aa" placeholder="请输入账号">提示的作用
var obj=document.querySelector(".aa")
console.dir(obj)
console.log(obj.innerHTML)
obj.innerHTML="<h1>新内容</h1>"
obj.innerText="<h1>新内容</h1>"
obj.value="aaaaaaa"
obj.innerHTML="<h1>新内容</h1>"
obj.innerText="<h1>新内容</h1>"
2.2 修改属性
原生属性
对象.属性=值
var obj=document.querySelector(".aa")
console.log(obj.className)
obj.class="demo"
console.log(obj)
自定义属性
setAttribute
obj.setAttribute("hello","helloworld")
console.log(obj.getAttribute("hello"))
2.3修改样式
1.对象.style.属性=值
obj.style.background="red"
obj.style.color="yellow"
obj.style.fontSize="80px"
2 对象.style.cssText
obj.style.cssText="background:red;color:yellow;font-size:60px"
3.通过修改属性,结合css达到修改样式的目的
obj.className="red"
tip:随机
obj.onclick=function(){
var bj=""
for(var i=0;i<6;i++){
bj+=Math.round(Math.random()*9)
}
console.log(bj)
obj.style.background="#"+bj
}
综合:
<h1 class="demo" style="background-color: aquamarine;">
<span>demo</span>
<div>aaaa</div>
</h1>
<ul>
<li>hello</li>
<li>hello</li>
<li class="aa">
<p>demo</p>
<h2>tt</h2>
<a href="#">coa</a>
</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
var arr=document.querySelectorAll("li")
console.log(arr)
arr[0].onclick=function(){
arr[0].style.background="red"
}
arr[1].onclick=function(){
arr[1].style.background="red"
}
arr[2].onclick=function(){
arr[2].style.background="red"
}
arr[3].onclick=function(){
arr[3].style.background="red"
}
arr[4].onclick=function(){
arr[4].style.background="red"
}
arr[5].onclick=function(){
arr[5].style.background="red"
}
等于for循环
for(var i=0;i<arr.length;i++){
// 当点击事件时i已经跳出来循环了
arr[i].onclick=function(){
arr[i].style.background="red"
}
}
加上随机
for(var i=0;i<arr.length;i++){
arr[i].onclick=function(){
var bj=""
for(var i=0;i<6;i++){
bj+=Math.round(Math.random()*9)
}
this.style.background="#"+bj
}
}
3.添加
第一步:创造元素
①创建元素createElement()
②复制元素cloneNode() false表示浅复制,只复制外壳 true表示复制全部
var newNode=document.createElement("h1")
console.log(newNode)
newNode.innerHTML="新添加的元素"
newNode.className="aa"
newNode.style.background="yellow"
var oldNode=document.querySelector("h1")
var newNode=oldNode.cloneNode(true)
console.log(newNode)
第二步:添加元素
①appendChild在子元素最后位置添加
②insertBefore(要插入的元素,插入在哪个节点之前) 在某个子元素前添加
③replaceChild(要插入的元素,要被替换的元素)替换掉元素
var container=document.querySelector(".aa")
var h2=document.querySelector("h2")
console.log(container)
console.log(h2)
container.appendChild(newNode)
container.insertBefore(newNode,h2)
container.replaceChild(newNode,h2)
4.删除
父级元素调用删除的方法
removeChild(要删除的元素)
找父级元素,父级元素调方法
var conntainer=document.querySelector(".aa")
var h2=document.querySelector("h2")
conntainer.removeChild(h2)
或者
h2.parentNode.removeChild(h2)
版权归原作者 Lojarro 所有, 如有侵权,请联系我们删除。