我的课后总结（6）

HTML DOM定义了访问的操作HTML文档的标准方法，它把HTML文档呈现为带有元素，属性和文本的树枝结构，定义了访问HTML文档对象的属性，方法和事件。

HTML文档中的每个成分都是一个节点

整个文档是一个节点

每个HTML标签是一个节点

包含HTML元素中的文本是文本节点

每个HTML属性是一个属性节点

注释属于注释节点

首先我们创建几个标签

<style type="text/css">
            .sp{
                color: red;
            }
        </style>

<input type="button" name="btn" id="btn" value="点击">
        <div id="div1">
            这是div1
        </div>
        <div id="div2">
            这是div2
        </div>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
        <span class="sp">
            这是一个span标签
        </span>
    <p class="sp"></p >

然后要用各种方法获取标签

1.通过id属性获取元素

    var div1=document.getElementById("div1")
                div1.innerHTML="更改后的div"

2.通过标签名来获取标签

var divs=document.getElementsByTagName("div")
                for(var i=0;i<divs.length;i++){
                    console.log(divs[i])
                    divs[i].innerHTML="更改后的div"
                }

3.获取到所有属性class的值使sp标签

var els=document.getElementsByClassName("sp")
                console.log(els)

4.通过name属性来获取标签

var names=document.getElementsByName("names")
                console.log(names[0])

5.通过选择器名称来获取，只能获取一个

var quer=document.querySelector(".sp")
                console.log(quer)

6.通过对应的选择器获取所有满足条件的标签

var query=document.querySelectorAll(.sp)
                console.log(query)

7.通过标签的id属性的值获取标签

console.log(div1)

获取到标签后就可以对标签进行删除，条件，更改

删除

function dal(){
                var li=document.querySelectorAll("li")[0]
                ul.remove()删除全部 ul.removeChild（li）删除一个指定标签

}

新增

function add(){
                var li=document.createElement("li")
            li.innerHTML="添加一个新节点"
            ul.appendChild(li)
            }

更改

function upd(){
                var li=document.querySelectorAll("li")[0]
                li.innerHTML="更改后"
            }