Learning first day WEBAPI

WebApi: object is achieved by the operation of the operation target tag

Dom: Operation Page Bom: operation of the browser

Learning Objectives :

A, DOM operations commonly used

1, to obtain elements
2, the elements of the operation (set its properties or call methods)
3, dynamically create elements
4, to register an event element

Two, doucument objects

Third, access to elements

1、getElementsByTagName("标签名")
Result: Returns a pseudo-array containing all the elements qualifying
2、getElementById('id名') 通过id获取元素
result: the return of the corresponding element is that, if you can not find an empty pseudo-array
3, Summary:
(1) obtaining a batch: document/element.getElementsByTagName('标签名')
结果:返回一个伪数组，如果找不到返回空的伪数组
(2) obtained by id :

document.getElementById('id名')
结果:返回具体的元素,找不到返回null

小结:通过document这个对象调用获取元素的方法
getElementById 返回的是对应的DOM元素, 如果没有返回null
getElementsByTagName 返回的是存储DOM元素的伪数组,如果没有返回空的伪数组

​

Fourth, registration event

Syntax registered events: element name = .on event function;
a, the three elements of the event:
(1), Event Source: Who registration event, who is the event source
(2), the name of the event: What To register event, that is, is the event name, click on the event name of the event are: the click
(3), event handler: when an event triggers the function will be called
Second, to register a click event tag Note:
(1) Since hyperlinks a label, default refresh the page / Jump page
last line in the event handler, write a truern falese
can prevent a default tab refresh / jump page behavior
Third, sum up: the id Gets the element registration click event, add an event handler

Fifth, property operating element

1, all text elements inside the name .innerText return element, the assignment (not identification label)
2, the element name .innerHTML return all the content elements inside, the assignment (identification label will put labels directly rendered)
Note: all pairs of labels, in the middle of text content, the time set can be used
to modify the content of the element 3, the element name = .id "xx"
4, then the this event an element in its own event this element of this is the current

Sixth, when the page has been loaded, script execution code has been completed (each element has to register the event),

When a trigger event, will execute the event handler

Seven, form tags and attributes

First, the label
1, text: text box
2, button: Button
3, This is a drop-down menu : Click on the drop-down menu
4, 这是内容content Registration Agreement box
two, attribute
1, selected: Select button on behalf of the meaning of Boolean type
2, disabled: disable means
3, readonly: Read-only means

Eight Notes

1, all the css this property is written a plurality of words, DOM operation code when the JS - get rid of
the back word capitalized to
2, in the form tag, if only one attribute and value, and is the property itself, then write JS
code for DOM manipulation when the property value is a Boolean type can

Nine, summary

The DOM: the tag on the page into an abstract object, the operation target js, to achieve the purpose of the label on the operating page
element: in html

It is called tag, in the DOM, the elements called
acquisition elements:
document.element.getElementsByTabName ( 'tag name') returns a pseudo-array, such as a pseudo-array can not find an empty return
document.getElementById ( 'id name' ) returns that element meet the requirements, such as can not find or null
get body: document.body
get HTML: document.documentElement events : click events click event source : who registration event, who is the event source event processing function : when starting an event, a function call when the starting event: event source .on + event name = event handler

操作元素的属性：
innerText
innerHTML
相同点：都会覆盖原来的内容
不同点：innerText 只识别文本
        innerHTML 可以识别标签
注意： 一般用于双标签

​