前端-js：知识补充（增删改查）

Lojarro 2024-10-21 16:03:02 阅读 68

dom操作

document（文档） object（对象） model

增删改查

1.查找

1.1 getElementById()

根据id值获取元素，返回符合条件的第一个对象

<div id="aa">demo1</div>code>

<p id="aa">bbb</p>code>

<h3 id="aa">sss</h3>code>

<div id="pp" class="aa" ds="sc" style="background-color: red;">demo10</div>code>

var obj=document.getElementById("aa")

console.log(obj)

以文档打印

  
 <code>console.dir(obj) 
 
  
  
 以对象打印
  
  对象里的属性：
 
<code>obj.style.background="red"code>
obj.style.color="yellow"code>
obj.style.fontSize="80px"code>
obj.onclick=function(){
 alert(1)
} 
 
  
  
 null-->从上往下进行，先进行外引到这里，没有id为aa的
  
 
  
 
 1.2.getElementsByClassName()
         根据class值获取元素，返回所有符合条件的对象组成的数组
 
 
 
<code><div class="aa">demo</div>code>
 <div class="aa">demo1</div>code>
 <p class="aa">bbb</p>code>
 <h3 class="aa">sss</h3>code> 
var arr=document.getElementsByClassName("aa")
console.log(arr) 
 
  
  
 对象：
  
 <code>arr[0].style.background="red"code>
arr[0].style.color="yellow"code>
arr[0].style.fontSize="80px"code>
arr[0].onclick=function(){
 alert(1)
} 
  
1.3.getElementsByTagName()
 根据元素名称获取元素，返回所有符合条件的对象组成的数组
 <code>var arr=document.getElementsByTagName("div")
console.log(arr)
console.log(arr.length) 
 
1.4.querySelector()
 根据选择器获取元素  （包含选择器...) 返回符合条件的第一个对象
 <code>var obj=document.querySelector(".aa")
console.log(obj) 
 
1.5.querySelectorAll()
         根据选择器获取元素,返回所有符合条件的对象组成的数组
 
<code>var arr=document.querySelectorAll(".aa")
console.log(arr) 
 
<code><p class="cc">ch</p>code>
 <div class="aa">child1code>
 <p class="bb">demo</p>child2code>
 <h3 class="aa">demo2</h3>child3code>
 </div>
 <div id="pp" class="aa" ds="sc" style="background-color: red;">demo10</div>code> 
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
  
 <code><p class="cc">ch</p>code>
 <div class="aa">child1code>
 <p class="bb">demo</p>child2code>
 <h3 class="aa">demo2</h3>child3code>
 </div>
 <div id="pp" class="aa" ds="sc" style="background-color: red;">demo10</div>code> 
 在这里，第一个孩子是child1
 
var obj=document.querySelector('.aa')
console.log(obj.firstChild)
 
 
 2.修改
 
 2.1修改内容
   
  
 innerHTML属性  把修改的内容给当作标签处理
  
  
  
 innerText   把修改的内容当做文本处理
  
  
  
 value修改input里的值
  
  
 
<code><div class="aa">demo1</div> code>
 <input type="text" class="aa" value="你好">code>
 <input type="text" class="aa" placeholder="请输入账号">提示的作用code> 
 
 
var obj=document.querySelector(".aa")
console.dir(obj)
console.log(obj.innerHTML)
obj.innerHTML="<h1>新内容</h1>"code>
obj.innerText="<h1>新内容</h1>"code>
obj.value="aaaaaaa" code> 
 
 
 
 
 
 
  
 <code>obj.innerHTML="<h1>新内容</h1>"code>
 
  
 <code>obj.innerText="<h1>新内容</h1>"code>
 
 
 2.2 修改属性
   
  
 原生属性  
  
  
         对象.属性=值
  
  
 <code>var obj=document.querySelector(".aa")
console.log(obj.className)
obj.class="demo"code>
console.log(obj) 
  
   
  
 自定义属性  
  
  
         setAttribute
  
 <code>obj.setAttribute("hello","helloworld")
console.log(obj.getAttribute("hello")) 
 
 
 
 
2.3修改样式
 1.对象.style.属性=值
 <code>obj.style.background="red"code>
obj.style.color="yellow"code>
obj.style.fontSize="80px"code> 
 
 
2 对象.style.cssText
 <code>obj.style.cssText="background:red;color:yellow;font-size:60px"code>
 
  
3.通过修改属性，结合css达到修改样式的目的
 <code>obj.className="red"code>
 
  
 
tip:随机
 obj.onclick=function(){
 var bj=""code>
 for(var i=0;i<6;i++){
 bj+=Math.round(Math.random()*9)
 }
 console.log(bj)
 obj.style.background="#"+bjcode>
} 
 
  综合：
 
<code> <h1 class="demo" style="background-color: aquamarine;">code>
 <span>demo</span>
 <div>aaaa</div>
 </h1>
 <ul>
 <li>hello</li>
 <li>hello</li>
 <li class="aa">code>
 <p>demo</p>
 <h2>tt</h2>
 <a href="#">coa</a>code>
 </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"code>
}
arr[1].onclick=function(){
 arr[1].style.background="red"code>
}
arr[2].onclick=function(){
 arr[2].style.background="red"code>
}
arr[3].onclick=function(){
 arr[3].style.background="red"code>
}
arr[4].onclick=function(){
 arr[4].style.background="red"code>
}
arr[5].onclick=function(){
 arr[5].style.background="red"code>
} 
等于for循环
 
for(var i=0;i<arr.length;i++){
 // 当点击事件时i已经跳出来循环了
 arr[i].onclick=function(){
 arr[i].style.background="red"code>
 }
} 
加上随机
 
for(var i=0;i<arr.length;i++){
 arr[i].onclick=function(){
 var bj=""code>
 for(var i=0;i<6;i++){
 bj+=Math.round(Math.random()*9)
 }
 
 this.style.background="#"+bjcode>
 
 }
} 
3.添加
  第一步：创造元素
 ①创建元素createElement()
 
②复制元素cloneNode()  false表示浅复制，只复制外壳  true表示复制全部
 
var newNode=document.createElement("h1")
console.log(newNode)
newNode.innerHTML="新添加的元素"code>
newNode.className="aa"code>
newNode.style.background="yellow"code> 
 
<code>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) 
 <code>container.insertBefore(newNode,h2)
 
 <code>container.replaceChild(newNode,h2)
 
 
4.删除
   
  
 父级元素调用删除的方法
  
  
  
   removeChild(要删除的元素)
  
 找父级元素，父级元素调方法
 
<code>var conntainer=document.querySelector(".aa")
var h2=document.querySelector("h2")
conntainer.removeChild(h2) 
或者 
 
h2.parentNode.removeChild(h2)