一、获取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();