DOM

document object model（文档对象模型）

增删改查 crud

所有写在元素开始标签之中的都是元素对象的属性

查：查找元素

document.getElementById("id名") //返回对象

document.getElementsByClassName("class名") //返回类数组

document.getElementsByTagName("标签名") //返回类数组

docuemnt.getElementsByName("名字") //表单input有name属性，返回类数组

document.querySelector(css选择器) //返回对象（就算有多个也只返回一个）

document.querySelectorAll(css选择器) //返回的类数组

改

改属性

1.通过对象的方式

var box =document.grtElementById("box");
box.href="http://www.jd.com”

2.setAttribute,getAttribute

getAttribute() 方法通过名称获取属性的值。 setAttribute() 方法创建或改变某个新属性。如果指定属性已经存在,则只设置该值。

//getAttribute("属性名") 不常用

// setAttribute("属性名","属性值")
//先获取到元素现在的Id
var box =document.getElementById("box");
//然后更改元素Id
box.setAttribute("id","abc");

改内容

innerText 可以获取到元素开始标签到结束标签之间的文本内容

var box=document.getElementById("box");
box.innerText="哈哈";

innerHTML可以获取到元素开始标签到结束标签之间的内容（如果更改的内容比较多，需要换行要记住引号不支持换行，想换行必须进行字符串拼接）（如果引号有嵌套，需要外面单引号里面双引号）

删

删内容

//innerHTML=""
var box = document.getElementById("box");
box.innerText="";

删属性

//removeAttribute("属性名")
var box = document.getElementById("box");
box.removeAttribute("id");

删元素/删标签

父元素对象.removeChild(子元素对象)
注意：删的是子元素对象，一次只能删一个，如果有多个需要删除，要用循环遍历

var box = document.getElementById("box");
//因为用getElementsByClassName取到的是类数组，所以要加一个[0]
var child = dicument.getElementsByClassName("abc")[0]
box.removeChild(child);

增

增加元素：

（1）创建元素

document.createElement("标签名")

（2）添加到对应的位置

父元素对象.appendChild(子元素对象)

（3）添加属性和内容

对象.属性=

var box = document.getElementById("box");
var div = document.createElement("div");
box.appendChild(div);//添加标签
div.innerHTML="helloworld";//改内容
div.id="hello";//改id
//改class，因为class是关键字，所以不能写class，要写className
div.className="nav";

事件

用户的动作触发的

onclick:点击事件

onfocus：获得焦点事件//按tab键也可以触发

onblur：失去焦点事件

onchange：输入值改变时触发

oninput：输入内容就触发

onmouseover：鼠标移入事件

onmouseout：鼠标移出事件

onmousemove：鼠标移出事件：只要鼠标在移动就会触发；用途：放大镜

onkeydown：键盘按下

onkeypress：键盘压力的过程

onkeyUp：键盘抬起

/*
触发事件:
元素对象.时间名=函数名/函数值;
函数名：fn
函数值：
function fn(){
  alert(1);
}
*/

this（关键字）

this代表一个对象

window是一个全局变量，变量，函数等都是全局变量的一个属性，window对象的属性和方法在访问的时候都可以省略前缀

this指向的是函数运行时所在的对象

<body>
  <div id="ji">姬无命</div>
  <div id="lv">吕秀才</div>
  <script>
  var ji = document.getElementById("ji");
	var lv = document.getElementById("lv");
	//谁调用了函数，那么函数中的this就指谁
	functino fn(){
    alert(this.innerHTML);
  }
	ji.onclick=fn;//姬无命
	lv.onclick=fn;//吕秀才
  </script>
  </body>

JavaScript（四）

DOM

查 ：查找元素

改

改属性