|js操作document对象

|-找到对象

|--document.getElementById("id名"); 通过id名找到唯一的对象

var duixiang = document.getElementById("first");console.log(duixiang);

|--document.getElementsByClassName("class名")[0]; 通过class名找到同名对象的集合，再通过索引找到每一项

var duixiang = document.getElementsByClassName("second"); var duixiang = document.getElementsByClassName("second")[0]; console.log(duixiang);

|--document.getElementsByName("name名")[0]; 通过name名找到同名对象的集合，再通过索引找到每一项

var duixiang = document.getElementsByName("third"); var duixiang = document.getElementsByName("third")[0]; console.log(duixiang);

|--document.getElementsByTagName("标签名")[0]; 通过标签名找到所有相同标签的集合，再通过索引找到每一项

var duixiang = document.getElementsByTagName("div"); var duixiang = document.getElementsByTagName("div")[0]; console.log(duixiang);

|--document.querySelector("#id名"); 通过id选择器找到唯一的对象

var duixiang = document.querySelector("#first"); console.log(duixiang);

|--document.querySelector(".class名"); 通过class选择器找到class名同的对象的集合的第一项

var duixiang = document.querySelector(".second"); console.log(duixiang);

|--document.querySelectorAll".class名")[0]; 通过class选择器找到class名同的对象的集合，再通过索引找到每一项

var duixiang = document.querySelectorAll(".second")[0]; var duixiang = document.querySelectorAll(".second"); console.log(duixiang);

|-操作对象  通过.选择

|--操作内容

|----操作表单内容：value=""

var biaodan = document.getElementsByTagName("input")[0];biaodan.value = "给value加属性值";

|----操作非表单内容：innerHTML=""、innerText=""

var biaodan = document.getElementsByTagName("input")[0];biaodan.value = "给value加属性值";var feibiaodan = document.getElementById("first");feibiaodan.innerText = "innerText
不可以解析标签"

|--操作样式

|----改变标签的样式：style.样式名 =""

#first{    width: 200px;    height: 200px;    background-color: green;    border-radius: 10px;    color: blue;    text-align: center;    line-height: 200px;}var yangshi = document.querySelector("#first");yangshi.style.width = "300px";yangshi.style.height = "300px";yangshi.style.backgroundColor = "yellow";yangshi.style.marginLeft = "100px";

 

|----改变标签的名称,标签直接变为另一个名称的样式：className=""

.second{    width: 200px;    height: 200px;    background-color: green;    border-radius: 10px;    color: blue;    text-align: center;    line-height: 200px;    float: left;}.fourth{    width: 300px;    height: 300px;    background-color: yellow;    border-radius: 100px;    color: blue;    text-align: center;    line-height: 200px;    margin-top: 100px;    float: left;}var yangshi = document.querySelector(".second");yangshi.className = "fourth";

|--操作属性

|----通过属性名获取属性：getAttribute("属性名");

     
 var huoqu = document.querySelector(".second");console.log(huoqu.getAttribute("name"))

|----改变属性名和属性值：setAttribute("属性名"，"属性值");

张店临淄周村全选var gaibian = document.getElementsByTagName("input")[1];gaibian.setAttribute("checked","checked")

|----通过删除属性名来删除标签的属性：removeAttribute("属性名");

     
var shanchu = document.getElementsByTagName("div")[0];shanchu.removeAttribute("aa");console.log(shanchu);

|事件

|-常用事件

|--点击事件:onclick

|--鼠标按下事件：onmousedown

|--鼠标弹起事件：onmouseup

|--内容改变事件：onchange

|--失去焦点事件：onblur

|--得到焦点事件：onfocus

|--鼠标移入事件：onmouseover

|--鼠标移出事件：onmouseout

|-给元素加事件的方法

|--在标签元素内部添加事件

|----事件调用函数：<标签名    事件名="函数名()"></标签名>

|--通过循环给多个元素添加事件

|----获取对象元素，通过时间给元素添加函数：对象值.事件名=匿名函数(one[i].onclick = function(){})

|this关键词

|-先获取对象attr，不可是集合

|-此时this.就是attr.