Dom Document Object Model | Javascript

Source: Internet
Author: User

# 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.