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";
以上是关于0514JS操作document对象事件(this)的主要内容,如果未能解决你的问题,请参考以下文章