0514JS操作document对象事件(this)

Posted mjwwzy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了0514JS操作document对象事件(this)相关的知识,希望对你有一定的参考价值。

|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<br />不可以解析标签"

innerHTML可以解析标签


|--操作样式
|----改变标签的样式: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("属性名");

<div class="second" name="third" ></div>
var huoqu = document.querySelector(".second"); console.log(huoqu.getAttribute("name"))


|----改变属性名和属性值:setAttribute("属性名","属性值");

<input type="checkbox" name="" id="" value="" />张店
<input type="checkbox" name="" id="" value="" />临淄
<input type="checkbox" name="" id="" value="" />周村
<input type="checkbox" name="" id="" value="" />全选
var gaibian = document.getElementsByTagName("input")[1];
gaibian.setAttribute("checked","checked")


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

<div id="" style="" aa="" bb=""></div>
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.









































以上是关于0514JS操作document对象事件(this)的主要内容,如果未能解决你的问题,请参考以下文章

JS中基本window.document对象操作以及常用事件!

0515JS事件函数操作document对象练习

JS 中 new 操作符

js dom操作总结

BOM与事件

js windows对象