获取元素

255 阅读3分钟

一、获取input框里的元素

<input type="text" name="" id=""><button>按钮</button>
    <select name="" id="">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
 var btn = document.querySelector("button");
 var inp = document.querySelector("input");
 var selEle = document.querySelector("select");
 btn.onclick = function(){
            console.log(inp.value);  //就是input框里的值
            console.log(selEle.value);//就是选项卡里的内容
        }

二、DOM元素获取

DOM 操作 :

  • 一、增:文档新增
  • 二、删
  • 三、改:1.修改样式 2.属性修改
  • 四、查 :获取元素 五、绑定事件

1、dom 的获取

// 1.通过id来获取 
        var ele = document.getElementById("myid"); //获取的是一个元素
// 2.通过类名来获取 
        var ele = document.getElementsByClassName(".box"); //获取到的是一个伪数组
// 3.通过标签名称获取 
        var eles = document.getElementsByTagName("div"); // 获取到所有的div  ,也是一个伪数组;
// 4.可以通过css选择器来获取 
        var ele = document.querySelector(".box");  // 只能获取一个元素 ,即使有多个元素 也只能获取第一个 
        console.log(ele);
        
        var eles = document.querySelectorAll(".box"); // 会获取到所有符合条件的元素,放在一个伪数组里面
        console.log(eles);

2、简单的dom操作

操作步骤2步:1.获取该元素 2.操作该元素

1)innerHTML: 1.会替换获取到的元素里的内容(可以解析 html ); 2.获取元素里的html。
2)innerText: 1.会替换获取到的元素里的文本(不能解析html); 2.获取元素里的文本
3)style :1.可以设置获取的样式 2.可以获取元素的样式
注意点:
a.样式不支持 - 的写法 (需要把background-color转成 backgroundColor)
b. 只能操作行间样式 行间没有样式就获取不到

4)类名className :用于操作元素的类名 : 1.替换原有类名  2.获取元素的类名
注意: className 在设置的时候会覆盖之前的类名
 var btn =  document.querySelector(".btn");
 var divEle = document.querySelector("div");
 btn.onclick = function(){
 divEle.className = "box";  // 当点击btn的时候给div加上"box"类名
 divEle.className += " box1";//点击btn的时候给div累加"box1"类名
}

操作属性

 <div class="active" myattr="123">111</div>
var divEle = document.querySelector(".active");

// 1.获取属性 :属性的值 =  元素 .getAttribute("属性名");
var attValue =  divEle.getAttribute("class");
console.log(attValue)//active

// 2.设置属性 元素.setAttribute("属性名","属性值");
document.querySelector("button").onclick = function(){
divEle.setAttribute("addAttr","456");//给div添加行内属性addAttr和属性值456
        }
        
 // 3.删除属性: 元素.removeAttribute("属性名");属性值自然跟着删除了
document.querySelector("button").onclick = function () {
divEle.removeAttribute("myattr");
}

一、增加相关createElement

  • 1.创建元素 : 元素 = document.createElement("标签名");

  • 2.把元素添加到指定dom里面 ; 语法 父元素.appendChild(要添加的元素); appendChild :1 .不会覆盖之前的内容 2.会加在父容器的最后面;

  • 3.insertBefore:要把元素添加到指定的位置 语法 :父元素.inserBefore("要添加的元素","添加到哪个之前");

<div class="box">
 <div>555</div>
 <div class="four">444</div>
</div>
var boxEle = document.querySelector(".box");
var fourEle = document.querySelector(".four");
var pEle = document.createElement("p");
pEle.innerHTML = "123";
boxEle.insertBefore(pEle,fourEle); // 在 boxEle父元素里  添加 一个 pEle在 fourEle之前

二、删除相关removeChild 或者remove

  • 1.removeChild : 可以在父元素里删除指定的子元素 语法 : 父元素.removeChild("子元素");
var btn = document.querySelector(".btn");
var boxEle = document.querySelector(".box");
var fourEle = document.querySelector(".four");
btn.onclick = function(){
boxEle.removeChild(fourEle);  //在boxEle父元素里面删除 fourEle子元素
}
  • 2.remove 可以直接删除当前元素; 语法 :当前元素.remove();
var btn = document.querySelector(".btn");
var fourEle = document.querySelector(".four");
btn.onclick = function(){
    fourEle.remove(); //删除fourEle元素,不用找他的父级,想删谁直接删
}

三、修改相关replaceChild

  • 1.用一个元素替换另外一个元素 语法: 父元素.replaceChild(要替换的新元素,替换的旧元素)

四、复制一个元素 cloneNode

  • 语法 :新的元素 = 元素.cloneNode();