12.14笔记

最新推荐文章于 2024-09-16 21:30:36 发布

2301_80728634

最新推荐文章于 2024-09-16 21:30:36 发布

阅读量354

点赞数 6

文章标签：笔记前端 javascript

本文链接：https://blog.csdn.net/2301_80728634/article/details/135034844

版权

1.更改元素属性

元素属性：1.普通属性

2.style属性

//普通属性 元素对象.属性名=属性值

console.log(img.getAttribute("src"))
img.setAttribute("title","呼呼呼")

2.设置style样式属性

<style>
    .box{
        width:300px;
        height:300px;
        background-color:pink;}
    .new{
        display;block;
        width:300px;
        height:300px;
        }
</style>

<body>
    <div class="box"></div>
    <script>
        let box=document.querySelector(".box")
        //元素属性.style.属性名="属性值"
        box.style.width="500px"
        box.style.height="700px"
        backgroundColor="red"
        box.style.display="block"





    //2.className    会覆盖原来的类名
    box.className="new"
    



    //3.classList
    box.classList.add("new")
    box.classList.remove("box")
    box.classList.toggle("box")
    box.classList.toggle("box")    //切换



    //获取style样式的属性值
    console.log(getComputedStyle(box,false)["backgroundcolor]")
    </script>
</body>

3.offset属性

<style>
  .box{
    position:absolute;
    top:200px;
    left:100px;
    background-color:aqua;
    width:300px;
    height:300px;
    }  
</style>


<script>
    let box=document.querySelector(".box")
    console.log(box.offsetWidth)
    console.log(box.offsetHigth)
    console.log(box.offsetTop)
    console.log(box.offsetLeft)
</script>

5.节点的相关操作

<ul>

</ul>

<script>

        //1.创建一个li标签
        let newli=document.createElement("li")
        //2.添加内容
    newli.innerHTML=`<a href>我是新添加的</a>`
    console.log(newli)
    //元素的追加          父元素
    let ul=document.querySelector("ul)
    ul.appendChild(newli)

        

</script>

6.查找节点

<div class="father">
    父亲
    <div son>儿子1</div>
    <div son>儿子2</div>
    <div son>儿子3</div>
    <div son>儿子4</div>

</div>
<script>
    //通过父亲取子节点
    let f=document.querySelector(".father")
    console.log( f.children[2])
    console.log(f.childNode)
    
    //通过儿子找到父亲
    let s=document.querySelector(".son")
    console.log(s.parentNode)
    
    //兄弟节点
    let son2=document.querySelector(".son2")
    console.log(son2.previousElementSibling)
    console.log(son2.nextElementSibling)
   
   
</script>

，

7.inserBefore

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    //创建li
    let newli=document.creatElement("li")
    //添加内容
    newli.innerHTML=`新来的`
    //追加
    ul.appendchild(newli)
    
    //ul.insertBefore(目标节点，参照节点)
    ul.insertBefore(newli,children[1])
</script>

8.克隆节点

<div classs="father">
    xsxsxs
    <div class="son">wsd</div>
    
</div>
    
<script>
    let newf=document.querySelector(".father")
    console.log(newf.cloneNode(ture))
</script>

9.删除节点

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    let ul=document.querySelector("ul")
    ul.removeChild(ul.child[1])
</script>

10.事件监听

<button>点击</button>
<script>
    //事件源，事件类型，事件对象
    //事件监听
    let btn=document.querySelector("button")
    btn.addEventlistener("click",()=>{
        alert("66656666666")
    })




    //事件源.addEventlistener("事件类型"，处理函数，ture|false)
</script>

click

keyup

change

mouseenter

mouseleave