美文网首页
dom导航和操纵元素

dom导航和操纵元素

作者: 苍老师的眼泪 | 来源:发表于2022-03-11 00:32 被阅读0次
dom.jpg
image.png
<!DOCTYPE html>
<html lang="en">
<body>
    <div id="a">
        <div id="b"></div><div id="c">
            <div id="d"></div>
        </div>
    </div>

    <button onclick="dianji()">点击</button>

    <script>
        console.log(a.childNodes)
        console.log(a.firstChild)
        console.log(a.hasChildNodes())
        console.log(a.lastChild)
        console.log(b.nextSibling)
        console.log(b.parentNode)
        console.log(c.previousSibling)
    </script>

    <script>
        
        function dianji() {
            var new_element = document.createElement('p')
            new_element.innerText = 'new_element'
            
            a.appendChild(new_element)  
            a.insertBefore(new_element, b)

            c.removeChild(d)

            a.replaceChild(new_element, b)
        }
        
    </script>
</body>
</html>
1922c4bbedc2878b1f16b3959fb2cd9.jpg

相关文章

  • dom导航和操纵元素

  • Dom4 操纵元素属性

    元素属性操纵 第一种 第二种 第三种 Dom元素操纵元素属性 获取: getAttribute(名称) 设置: s...

  • DOM元素搜索

    当元素关联较密切的时候,搜素DOM元素可以用DOM导航属性。如果我们想获取页面上的任意一个元素。则可以使用以下搜索...

  • React中ref的使用

    React中Ref是什么? ref是React提供的用来操纵React组件实例或者DOM元素的接口。 ref的作用...

  • DOM节点和DOM元素?

    DOM 还使用术语元素(Element)它与节点非常相似。那么,DOM节点和元素之间有什么区别呢? 1. DOM节...

  • 常规DOM操作

    访问和修改DOM元素修改DOM元素的样式,造成重绘和重排版通过DOM事件处理用户响应 DOM--文档对象模型一 ...

  • 前端面试-vue汇总

    一、MVVM 1.背景:用js操纵html 1.1. 直接用js操纵dom节点,原生API var dom = d...

  • React事件处理

    React元素的事件处理和DOM元素的区别 React元素的事件处理和DOM元素相似,但语法上有些不同: Reac...

  • 02-JQuery操作DOM

    一、JS获取DOM元素和JQuery获取DOM元素的区别 JavaScript获取的是DOM对象,而Jquery获...

  • Angular 4 事件冒泡

    Angular 组件和 DOM 元素通过事件与外部进行通信, Angular 事件绑定语法对于组件和 DOM 元素...

网友评论

      本文标题:dom导航和操纵元素

      本文链接:https://www.haomeiwen.com/subject/ucqcdrtx.html