Home > Developer > JavaScript
# After learning the object-oriented programming language such as Python, you can learn JavaScript in its way of thinking . # DOM Document Object model is equivalent to a package, or module, defines a number of classes, to do the operation of the Web page;
#Document Type#an instance of the Document object when HTMLDocument;#1. Two kinds of shortcuts to access child nodes;#①documentelement#var html = document.documentelement Direct access to the #②childnodes list Access document elements#attached: The Document object also has a body property that points to the <body> element's reference;#var body = document.body#2.HTMLDocument inherits the Document object and adds 3 attributes on top of it;#①url: Returns the full URL#var url = document. URL#②domain: Return domain name#var domain = document.domain#③referer: Returns the URL of the link to the current page#var referer = Document.referer#The above 3 attributes are stored in the HTTP request header;#3. Find elements#①getelementbyid () returns a reference to an element based on the id attribute, with the same ID returning only the first;#②getelementbytagname ()#returns a Htmlcollection object as a collection containing the same label;#How do I get an attribute for a specified position element? #① Gets the position of the element according to the subscript, and then takes an attribute;#alert (IMAGES[0].SRC)#In fact, the item () method is called, equivalent to: alert (Images.item (0). src)#② Gets an element based on the name attribute, and then takes an attribute#alert (images[' myimage ')#In fact, the Nameditem () method of the Htmlcollection object is called,#equivalent to: Alert (Images.nameditem (' myimage '))#attached: ' * ' means find all;#③getelementbyname () returns an element based on the name attribute, returning a nodelist;#4. Special Collections#document.anchors returns all <a> elements with the name attribute#document.forms return all <form> elements#document.images return all elements#document.links return all <a> elements with href characteristics#5. Document writing (writes the output stream to the Web page)#①write ()#②writeln () adds a newline character to the end of a string that is written \ n#Note: When writing HTML tags, you need to include the escape character#Example:#<script>document.write ("Hello World") </script>#<!--write -up#<title>document.write () </title>#Note: If you write the entire document after you have finished reading it, the page will be rewritten;#window.onload = function () {document.write ("Hello World")};#This event causes the read document to be written only again;
#element Type#1.HTML elements are represented by the HtmlElement object or its subclasses;#2. Obtaining Features#①getattribute () Gets the value of the attribute (custom attribute plus data-prefix for validation)#attached: Two special types of features:#①style. Assigning styles to elements via CSS;#getattribute () returns the CSS text, accessed by the property, and returns an object;#②onclick and other events;#getattribute () returns the JS code, through the property access, returns a function;#3. Setting features#①setattrbute () Parameter: attribute name, value#created and set if the attribute does not exist;#dir.setattribute (' id ', ' someotherid ') attribute name automatically converted to lowercase#because all attributes are attributes, you can assign values directly:#div.id = "Someotherid"#However, adding custom attributes in this way is not a property;#②removeattribute ()#completely remove the attributes of the element;#4. Creating Elements#document.createelement ()#①var div = document.createelement (' div ')#②div.id = "Mynerdiv" # no longer displayed in the page#③document.body.appendchild (DIV) # Add attribute to document Tree#5. Element sub-nodes#Note: Other browsers outside of IE use whitespace characters between elements as text nodes,#Therefore, the child nodes cannot be traversed by the childnodes attribute;#get child node element#var ul = Ducument.getelemntbyid ("myList")#var items = document.getelementbytagnmae ("li")
Dom Document Object Model | Javascript
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
