标签的相关操作---DOM

案例：

    <div class="box box1">box1</div>
    <form>
        账号：<input type="text" name="account">
        <br>
        密码：<input type="text" name="pwd">
        <br>
        爱好：<input type="checkbox" name="hobby" id="">吃
             <input type="checkbox" name="hobby" id="">喝
             <input type="checkbox" name="hobby" id="">嫖
             <input type="checkbox" name="hobby" id="">赌
        <br>
        <input type="submit" value="注册">
    </form>
    <img src="https://img1.baidu.com/it/u=917108111,1107211158&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=274" alt="">
    <a href="">百度</a>

1.添加属性、 修改属性

        标签.setAttribute(属性名，属性值)      没有就添加，有就修改

       let box1=document.querySelector(".box1")
        console.log(box1);
        // 添加属性、 修改属性 设置属性 标签.setAttribute(属性名，属性值)
        box1.setAttribute("aaa","添加的属性")
        box1.setAttribute("aaa","修改的属性")

2.获取属性值

         节点.getAttribute("属性名")

        box1.getAttribute("aaa")
        console.log(box1.getAttribute("class"));

3.删除属性

        节点.removeAttribute("属性名")

box1.removeAttribute("aaa")

除了以上可以对标签的属性进行操作，还可以通过点语法的形式直接对标签属性进行操作：

        标签.属性="属性值"

        let baidu=document.querySelector("a");
        baidu.href="http://www.baidu.com";//修改
        console.log(baidu.href);

        let account=document.getElementsByName("account")//获取节点
        console.log(account);//获取到的是数组
        account[0].value="654321";
        console.log(account[0].value);

4.修改标签中的内容

        1.innerHTML="内容"

        2.innerText="内容"

两者的区别：innerHTML可以读取标签和换行等，innerText不会

        box1.innerHTML="这是修改之后的内容"//会读取标签和换行
        box1.innerText="";//不会读取标签

 

所有代码截图：