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

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)