dom元素对象常用的属性和原生js方法总结_原生js 或者去dom元素的属性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38888512/article/details/105208425

getAttribute(prop)

获取dom元素的属性值。

    <div name="demo" id="demo" class="demo">
        <!-- 我是注释 -->
        <span></span>
    </div>
    <script>   
        var res = document.getElementsByTagName("div")[0].getAttribute("id") //demo       
    </script>

setAttribute(prop，value)

设置元素某个属性的值。

    <div name="demo" id="demo" class="demo">
        <!-- 我是注释 -->
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]
        var res = div.setAttribute("id","test") 
        // div变为：
        //<div name="demo" id="test" class="demo">...</div>
    </script>

innerText = value

设置自身子节点为文本值

    <div name="demo" id="demo" class="demo">
        <!-- 我是注释 -->
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]
        var res = div.innerText = "<b>test</b>" 
    </script>

在这里插入图片描述

innerHTML = value

设置自身子节点为文本值,并能识别标签。

    <div name="demo" id="demo" class="demo">
        <!-- 我是注释 -->
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]
        var res = div.innerHTML = "<b>test</b>" 
    </script>

在这里插入图片描述

nodeValue

Text 文本节点或 Comment 注释节点的文本内容,可读改。

var div = document.getElementsByTagName("div")[0].childNodes

在这里插入图片描述

nodeName和tagName

获取元素标签名。

    <div name="demo" id="demo" class="demo">
        <!-- 我是注释 -->
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]
        console.log(div.nodeName) //DIV
        console.log(div.tagName) //DIV
    </script>

attributes

元素对象的属性集合。可以修改属性值。

    <div name="demo" id="demo" class="demo">
        <!-- 我是注释 -->
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]
        var attrs =  div.attributes
    </script>

在这里插入图片描述

增删元素

document.createElement([tagname])

创建元素节点

document.createTextNode([文本])

创建文本节点

document.createComment([注释])

创建注释节点

appendChild([节点])

添加节点到元素中。只能添加一个参数，不支持文本。

<body>
    
</body>
<script>
    var body = document.getElementsByTagName('body')[0]
    var div = document.createElement('div')
    var text = document.createTextNode('我是div')
    var comment = document.createComment('我是注释')
    body.appendChild(div)
    div.appendChild(text)
    div.appendChild(comment) 
</script>

在这里插入图片描述

append([节点1]，[节点2]…[节点n])

和appendChild一样可以添加字节的，但是appdend更加强大，可以添加多个，并且支持文本的形式。

<body></body>
<script>
    var body = document.getElementsByTagName('body')[0]
    var div = document.createElement('div')
    var text = document.createTextNode('我是div')
    var comment = document.createComment('我是注释')
    body.appendChild(div)
    div.append(text,comment,'sss')
    
</script>

在这里插入图片描述

inserBefore(a,b)

添加节点到元素中。先添加a节点，在添加b元素前

<body>
    <p></p>
</body>
<script>
    var body = document.getElementsByTagName('body')[0]
    var P = document.getElementsByTagName('p')[0]
    var div = document.createElement('div')
    var text = document.createTextNode('我是div')
    var comment = document.createComment('我是注释')
    body.insertBefore(div,P)
    div.append(text)
    
</script>

在这里插入图片描述

删除元素

removeChild([节点])

删除子节点元素。

	<body>
    <p></p>
	</body>
<script>
    var body = document.getElementsByTagName('body')[0]
    var P = document.getElementsByTagName('p')[0]
    var div = document.createElement('div')
    var text = document.createTextNode('我是div')
    var comment = document.createComment('我是注释')
    body.insertBefore(div,P)
    div.append(text)
    div.append(comment)
    div.removeChild(comment)
</script>

在这里插入图片描述
可见，注释没有出现。

remove()

子节点元素自己删除。

<body>
    <p></p>
</body>
<script>
    var body = document.getElementsByTagName('body')[0]
    var P = document.getElementsByTagName('p')[0]
    var div = document.createElement('div')
    var text = document.createTextNode('我是div')
    var comment = document.createComment('我是注释')
    body.insertBefore(div,P)
    div.append(text)
    div.append(comment)
    comment.remove()  
</script>

在这里插入图片描述

replaceChild(new, origin)

新节点替换节点。

<body>
    <p></p>
</body>
<script>
    var body = document.getElementsByTagName('body')[0]
    var P = document.getElementsByTagName('p')[0]
    var div = document.createElement('div')
    var text = document.createTextNode('我是div')
    var text1 = document.createTextNode('我是测试replaceChild方法的')
    var comment = document.createComment('我是注释')
    body.insertBefore(div,P)
    div.append(text)
    div.append(comment)
    div.replaceChild(text1,text) 
</script>

在这里插入图片描述