0


前端-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)


本文转载自: https://blog.csdn.net/m0_75163045/article/details/142343945
版权归原作者 Lojarro 所有, 如有侵权,请联系我们删除。

“前端-js:知识补充(增删改查)”的评论:

还没有评论