js-dom-page element compatibility, common events, nodes

Page element Compatibility:

The so-called compatibility refers to whether the current browser supports the current object's properties or methods, if support is compatible, if not supported is incompatible.

As an example:

/** * To set the compatibility of text content between page labels * @param obj * @param value */function setinnertext (obj,value) {    if (obj.innertext) {        Obj.innertext = value;    } else {        obj.textcontent = value;    }} var txt ={   //Encapsulates text-related encapsulation into an object, before the function is now the object's method    getinnertext:function (obj) {        if (obj.innertext) {  // Return Obj.innertext supported by IE8 and earlier versions of the browser   ;        } else {            return   obj.textcontent;//Previous versions of Firefox supported        }    },    setinnertext:function (obj,value) {        if (obj.innertext) {            obj.innertext = value;        } else {            obj.textcontent = value;}}    ;

Summary of common events and settings for page element properties:

Common events: OnClick mouse click

OnDblClick Mouse Double-click

onkeyup triggers when a key above the keyboard is pressed and released

triggered when content in the onchange text content or drop-down menu changes

Onfocus gets focus, indicates text, etc. get mouse cursor

Onblur loses focus, indicates that the text box loses the mouse cursor

onmouseover mouse hover, mouse over the picture and so on

onmouseout Mouse out, leave the area of the picture

OnLoad Web page document load time

OnUnload when you close a webpage

OnSubmit when a form is submitted

setting and changing of element properties:

text box is disabled:

<input type= "text" value= "Please enter a value:" id= "txt"/>

(event omitted) when txt.disable=true; the text box is disabled; when txt.disable=false; the text box is deactivated.

When you get the focus of the text box:

text box background color setting: txt.style.backgroundcolor= color;

Setting of Border color: txt.style.bordercolor= color;

Selection box (checkbox):

var inputs=j_tb.getelementsbytagname ("input");

Checked

Sets or returns whether the checkbox should be selected

When Inputs[i]. Checked=true; indicates to be selected; When Inputs[i].checked=false is not selected.

Custom properties:

<input type= "text" class= "IP" id= "TXT" value= "123" aa= "258"/>

<script>

var txt = document.getElementById ("txt");

TXT.MM = "258"; You can use JS to set the custom properties

Console.log (Txt.type);

Console.log (txt.id);

Console.log (Txt.value);

Console.log (TXT.AA); JS can only get the original properties of the tag object, unable to get the custom properties

Console.log (TXT.MM); Custom properties for JS settings are available here

The way to pass an object is not to get the custom property of the tag element.

</script>

Node:

The rules of the node: DOM is defined as:

• The entire document is a document node
• Each XML tag is an element node
• The text contained in the XML element is a text node
• Each XML attribute is an attribute node
• Comments belong to note nodes

<Divclass= "box"ID= "box">    <ulID= "ul">        <Li>1111</Li>        <Li>2222</Li>        <LiID= "Li">3333</Li>        <Li>4444</Li>    </ul></Div> <Script>varul=document.getElementById ("ul"); Console.log (Ul.parentnode); //Direct access to UL's parent element nodevarLis=Ul.childnodes; //get all the child nodes, including the text node  for(varI=0; I<Lis.length;i++) {Console.log (lis[i]);}   Console.log (lis.length); //Length of 9 varLis2=Ul.children; //children will only get the UL inner element nodeConsole.log (lis2.length); //Length of 4 for(varI=0; I<Lis2.length;i++) {Console.log (lis2[i]);}</Script>

NodeTypes-The value returned by the well-known constant, nodename and NodeValue property:

The node type of the label (Element_node) is 1;

The name of the node is: the corresponding tag name

Node value of the label: null

The node type of the attribute (Attribute_node) is: 2;

Its name is: attribute name;

Its node value is: The value of the property;

The type of node for text (Text_node) is: 3

Its name is: #text

His value is: the content of the text. (no content is empty)

Sibling node:

<Divclass= "box"ID= "box">    <ulID= "ul">        <Li>1111</Li>        <Li>2222</Li>        <LiID= "Li">3333</Li>        <Li>4444</Li>    </ul></Div> <Script>varLi=document.getElementById ("Li"); Console.log (li.nextsibling); //next close to the node, Chrome Firefox is supported, but it is possible to get a text node, IE8 and the previous browser will ignore the blank text node, if the text has content, will also get toConsole.log (li.nextelementsibling);//both Google and Firefox have access to the next adjacent element node, and IE8 and previous versions do not supportConsole.log (li.previoussibling);//The previous node, Chrome Firefox support, but it is possible to get a text node, IE8 and the previous browser will ignore the blank text node, if the text has content, will also get toConsole.log (li.previouselementsibling);//both Google and Firefox have access to the next adjacent element node, and IE8 and previous versions do not support</Script>

js-dom-page element compatibility, common events, nodes