关于前端:DOM-文档对象模型

2次阅读

共计 2079 个字符，预计需要花费 6 分钟才能阅读完成。

原文链接：https://note.noxussj.top/?source=sifou

<html>
    <head>
        <title> 我是网站题目 </title>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>

        <div name="xiaoming"></div>

        <div id="box"></div>
    </body>
</html>

通过 id 拜访指定节点 getElementById

var node = document.getElementById('box')

通过 name 拜访指定节点 getElementsByName

var node = document.getElementsByName('xiaoming')

通过标签名称拜访指定节点 getElementsByTagName

var node = document.getElementsByTagName('div')

通过 class 拜访指定节点 getElementsByClassName

var node = document.getElementsByClassName('box')

全能拜访指定节点 querySelector

// 通过 id 拜访
var node = document.querySelector('#box')

// 通过 class 拜访
var node = document.querySelector('.box')

// 通过 tag 拜访
var node = document.querySelector('div')

全能拜访所有节点 querySelectorAll

// 通过 id 拜访
var node = document.querySelectorAll('#box')

// 通过 class 拜访
var node = document.querySelectorAll('.box')

// 通过 tag 拜访
var node = document.querySelectorAll('div')

拜访子节点 childNodes

node.childNodes

拜访父节点 parentNode

node.parentNode

拜访下一个兄弟节点 nextElementSibling

node.nextElementSibling

拜访上一个兄弟节点 previousElementSibling

node.previousElementSibling

插入子节点（排在最初）append

var node = document.querySelector('.box')

var newNode = document.createElement('div')

node.append(newNode)

插入子节点（排在最初）appendChild

var node = document.querySelector('.box')

var newNode = document.createElement('div')

node.appendChild(newNode)

在指定子节点后面插入节点 insertBefore

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

var newNode = document.createElement('div')

node.insertBefore(newNode, childNode)

创立元素节点 createElement

var newNode = document.createElement('div')

创立文本节点 createTextNode

var newTextNode = document.createTextNode('我是内容')

删除以后节点 remove

var node = document.querySelector('.box')

node.remove()

删除子节点 removeChild

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

node.removeChild(childNode)

替换子节点 replaceChild

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

var newNode = document.createElement('div')

node.replaceChild(newNode, childNode)

最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要再花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。

原文链接：https://note.noxussj.top/?source=sifou

正文完