2018年3月23号 Dom操作

Posted 2020-10-28 向兆泽

                                                                     Dom操作

 dom操作：找到元素 操作元素
          找元素(标签对象)
                   标签名
                       document.getElementsByTagName();
                   属性
                       document.getElementById();    id属性值
                       document.getElementsByName();    name属性值
                       document.getElementsByClassName();    class属性值
          操作元素
                 操作内容
                       非表单元素
                            标签对象.innerhtml    //获取标签内容
                            标签对象.innerHTML= 123   //修改标签内容
                       表单元素
                            标签对象.varlue   //获取标签内容
                            标签对象.varlue = 123    //修改标签内容
                 操作属性
                            标签对象.getAttribute("属性名");     //获取标签属性值
                            标签对象.setAttribute("属性名","值");     //设置标签属性值
                 操作样式
                           标签对象.style.color     //获取标签样式值
                           标签对象.style.color = "red"    //设置标签样式值
 // 添加事件
  //添加删除标签

例题：

body里面写的
<div id="z16_" style=" height: 100px; width: 400px;background-color: #E0DBDB;">
    <button onClick="z16()">点击变黄</button>
    <button onClick="z26()">点击变红</button>
    <button onClick="z36()">点击变黑</button>
    <button onClick="z46()">点击恢复</button>
</div>

js里面写的:
 点击变黄 变红 变黑 恢复
function z16(){
    //找到id为z16_的div把背景颜色改成黄色
    document.getElementById("z16_").style.backgroundColor="yellow";
}
function z26(){
    //找到id为z16_的div把背景颜色改成红色
    document.getElementById("z16_").style.backgroundColor="red";
}
function z36(){
    //找到id为z16_的div把背景颜色改成黑色
    document.getElementById("z16_").style.backgroundColor="black";
}
function  z46(){
    //找到id为z16_的div把背景颜色改成原色
    document.getElementById("z16_").style.backgroundColor="#E0DBDB";
}

View Code