标签:集合 常用 标签 tle value document second cond 焦点事件
|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";
标签:集合 常用 标签 tle value document second cond 焦点事件
原文地址:https://www.cnblogs.com/mjwwzy/p/9053970.html