Element elements are used to represent XML or HTML elements, providing access to element tag names, child nodes, and attributes
CharacteristicsNodetype:1
NodeName: The uppercase label signature of an element
Nodevalue:null
Parentnode:document or element
Child nodes may be element, Text, Comment, ProcessingInstruction, Cdatasection, EntityReference
[Note 1] You can use nodename to access the tag name of an element, or you can use the TagName property, which returns the same value
<ul class= "list" id= "list" > <li class= "in" >0</li> <li class= "in" id= "test" >test</li& Gt <li class= "in" >2</li></ul><script>var olist = document.getElementById (' list ' var otagtest = Olist.nodename; var onodetest = Olist.tagname; // 1 "UL" null <body> #text (blank text nodes are not supported under ie8-browser) Console.log (Olist.nodetype, Olist.nodename,olist.nodevalue,olist.parentnode,olist.childnodes[0 = = onodetest); // ul UL true </script> [Note 2] in HTML, tag names are always represented in all capitals, whereas in XML (and sometimes XHTML), tag names are always consistent with the source code. Assuming you are unsure whether your script will be executed in HTML or in an XML document, it is best to convert the label name to the same case before comparing it.
if (element.tagName.toLowerCase () = = "div") {//TODO }All HTML elements are represented by the HtmlElement type, not directly through this type, but also by its subtypes, and the HtmlElement type inherits directly from element and adds the following 5 properties, which are readable and writable.
ID: The unique identifier of the element in the document
Title: Additional descriptive information about the element, typically shown by a tooltip bar
Lang: Language code for element content, rarely used
Dir: The direction of the language, ltr (left-to-right) or RTL (right-to-left), and rarely used
ClassName: Corresponds to the class attribute of the element, which is the CSS class specified for the element.
<div class= "Boxclass" id= "Boxid" title= "Boxtitle" lang= "en" dir= "RTL" >123</div><script>var OBox = document.getElementById (' Boxid '); Console.log (Obox.classname,obox.id,obox.title,obox.lang, Obox.dir)//boxclass boxid boxtitle en RTL//[note] If text-align and Dir are set at the same time, The value of Text-align is set to Obox.dir = "ltr"; Console.log (obox.dir); // LTR</script>"CreateElement ()"
Use the Document.createelement () method to create a new element. This method takes a parameter that is to create the tag name of the element, which is not case-sensitive in an HTML document, but is case-sensitive in XML (including XHTML) documents. The Ownerdocument property is also set for the new element while creating a new element using the CreateElement () method
var odiv = document.createelement ("div"); // #documentConsole.log (odiv.ownerdocument);The ie8-browser can pass in the complete element tag for this method, or it can contain attributes.
var odiv = document.createelement (' <div id= ' box ></div> ');d ocument.body.appendChild (Odiv) ; Console.log (odiv);This approach avoids some of the problems with ie7-browsers creating elements dynamically.
[A] Cannot set the name attribute of a dynamically created <iframe> element
[b] cannot reset dynamically created <input> elements by the Reset () method of the form
[c] Dynamic creation of the type attribute value of "reset" <button> element is not reset form
[d] A batch of dynamically created name-identical radio buttons has no relation to each other. A set of radio buttons with the same name value should be used to represent different values for the same option, but there is no such relationship between a batch of dynamically created radio buttons.
var iframe = document.createelement ("<iframe name = ' MyFrame ' ></iframe>"); var input = document.createelement ("<input type= ' checkbox ' >); var button = Document.createelement ( "<button type = ' reset ' ></button>"); var radio1 = document.createelement ("<input type= ' radio ' name = ' Choice ' value = ' 1 ' >"); var radio2 = document.createelement ("<input type= ' radio ' name = ' Choice ' value = ' 2 ' >");An element can have any number of child nodes and descendant nodes, because the element can be a child of another element. The childnodes attribute of the element contains all its child nodes, which may be elements, text, annotations, processing instruction nodes. However, different browsers have differences in handling blank text nodes.
<ul class= "list" id= "list" > <li class= "in" ></li> <li class= "in" ></li></ul ><script>var olist = document.getElementById (' list '); // ie8-Browser returns 2, other browsers return 5. Because the Ie8-browser child node does not contain a blank text node console.log (oList.childNodes.length)</script>"Resolve" gets only the compatible wording of the element node
<ul class= "list" id= "list" > <li class= "in" ></li> <li class= "in" ></li></ul ><script>var olist = document.getElementById (' list '); var children = olist.childnodes; var num = 0; for (var i = 0; i < children.length; i++) { if(children[i].nodetype = = 1) { Num+ +; }} Console.log (num); </script>
Dom Elements node element
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
