0514JS manipulating document objects, events, (this)

|js Manipulating Document objects
|-Find Objects
|--document.getelementbyid ("id name"); Find a unique object by ID name

var Duixiang = document.getElementById ("First"); Console.log (Duixiang);

|--document.getelementsbyclassname ("class name") [0]; Finds a collection of objects of the same name through the class name, and then finds each item by index

var Duixiang = Document.getelementsbyclassname ("second");
var Duixiang = Document.getelementsbyclassname ("second") [0];
Console.log (Duixiang);

|--document.getelementsbyname ("name name") [0]; Finds a collection of objects of the same name by name, and then finds each item by index

var Duixiang = Document.getelementsbyname ("third"), var Duixiang = Document.getelementsbyname ("third") [0];console.log (Duixiang);

|--document.getelementsbytagname ("label name") [0]; Find a collection of all the same tags through the tag name, and then find each item by index

var Duixiang = document.getelementsbytagname ("div");
var Duixiang = document.getelementsbytagname ("div") [0];
Console.log (Duixiang);

|--document.queryselector ("#id名"); Find unique objects through the ID selector

var Duixiang = document.queryselector ("#first");
Console.log (Duixiang);

|--document.queryselector (". Class name"); The first item of a collection of objects of the same class name is found through the class selector

var Duixiang = Document.queryselector (". Second");
Console.log (Duixiang);

|--document.queryselectorall ". Class name") [0]; Finds a collection of objects of the class name with the class selector, and then finds each item by index

var Duixiang = Document.queryselectorall (". Second") [0];
var Duixiang = Document.queryselectorall (". Second");
Console.log (Duixiang);

|-Action object passed. Select
|--Operation Content
|----Action form content: Value= ""

var Biaodan = document.getelementsbytagname ("input") [0];biaodan.value = "Add attribute value to value";

|----operation non-form content: Innerhtml= "", innertext= ""

var Biaodan = document.getelementsbytagname ("input") [0];biaodan.value = "Add property value to Value"; var Feibiaodan = document.getElementById ("first"); feibiaodan.innertext = "innertext<br/> can not parse label"

innerHTML Can parse tags

|--Action Style
|----Change the style of the label: style. Name = ""

#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";

|----Change the name of the label, and the label changes directly to the style of another name: 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";

|--Action Properties
|----Get Properties by property name: getattribute ("attribute name");

<div class= "Second" name= "third" ></div>
var huoqu = Document.queryselector (". Second"); Console.log (Huoqu.getattribute ("name"))

|----Change the property name and property value: SetAttribute ("attribute name", "attribute value");

<input type= "checkbox" Name= "id=" "value=" "/> Zhangdian <input type=" checkbox "Name=" "id=" "value=" "/> Linzi < Input type= "checkbox" Name= "" id= "" value= ""/> zhoucun <input type= "checkbox" Name= "" id= "" value= ""/> Select all var Gaibian = document.getElementsByTagName ("input") [1];gaibian.setattribute ("Checked", "checked")

|----Delete the attribute of the label by deleting the property name: RemoveAttribute ("attribute name");

<div id= "" style= "" aa= "" bb= "" ></div>var Shanchu = document.getElementsByTagName ("div") [0]; Shanchu.removeattribute ("AA"); Console.log (Shanchu);

| events
|-Common Events
|--Click event: OnClick
|--Mouse Down event: onmousedown
|--Mouse Bounce Event: onmouseup
|--Content Change Event: onchange
|--Loss of focus event: onblur
|--Get Focus Event: onfocus
|--Mouse Move-in event: onmouseover
|--Mouse out event: onmouseout
|-Methods for adding events to elements
|--adding an event inside a tag element
|----Event Call function:< Tag name Event name = "function name ()" ></tag name >
|--adding events to multiple elements by looping
|----Gets the object element, adding a function to the element by time: the object value. event name = anonymous function (One[i].onclick = function () {})

|this keywords

|-Get the object attr first, not a collection

|-this is attr.

0514JS manipulating document objects, events, (this)