Scribd Logo
Unggah

Selamat datang di Scribd!

  • The DOM

    Diunggah oleh

    Charlie
    72 tayangan6 halaman
    DOM - The Document Object Model.

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    DOM - The Document Object Model.

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    72 tayangan6 halaman

    The DOM

    Diunggah oleh

    Charlie
    DOM - The Document Object Model.

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    THE DOCUMENT OBJECT MODEL

    Javascript has for a long time been considered the 'bad guy' of every internet user's experience on the web. It has widely become synonymous with the words 'POP UP' and 'SPAM' . This was evident, and still is, in many a spam site or marketing site where the main premise is forcing the user to click on a window and be presented with an opt-in form or some call to action. Nowadays if used unobtrusively JavaScript can create amazingly dynamic web pages. By coupling HTML and CSS, a happy marriage can be created by layering structure, style and behaviour. Q. How do we use Javascript responsively? A. Well, lets take a look! A great way to control the behaviour of your web page is to control what is called the DOM. Using JavaScript and the DOM you can directly access the document object and edit its elements. If you think of the DOM as a tree and all the elements are contained within that tree branching off from the main root in a web document, this is the <html> tag.

    The 'DOM' or 'Document Object Model' comes into life when you write an HTML document, save it and load it into a web browser, then it becomes an object. Now an object is slightly nondescript and in the real world can describe pretty much anything and everything. An object in the programming and real world can be recognised as a separate entity made up of many parts. In a programming language objects are very important and have a very specific job to do. The Object An object (when referring to a programming language) is a self contained group of instructions or statements. Variables that are associated with objects are called properties. Functions that are executed by objects are called methods. There are 3 kinds of objects in JavaScript: Native Objects These are objects already created within JavaScript; these include Array, Maths and Date objects. User Defined Objects: These are created and customised by programmers for a specific purpose. Host Objects: These are Objects provided by the browser. Some important objects are available to us for scripting and one of them is the 'window object', this is by far the most over-used object and is responsible for the pop up windows mentioned earlier. The window object has many more functions that arent as obtrusive, but we are going to explore a different host object. An important object for people interested in the actual web document itself is the 'document object'. With this we can edit the DOM and all its elements. Remember when I said about saving an HTML page turns it into an object, this document and all its elements can be controlled with a few methods. From this moment on I am going to be talking about the methods and properties of the document object. The M in DOM is Model. This means just like a map or blue print the DOM is broken down into smaller components. To carry on with the tree structure analogy, you could see the DOM as a kind of family tree starting with the root <html> a parent of sorts containing the rest of the web page tags. A

    All of the other element could be seen as branches of the same tree.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Wish list</title> </head> <body> <h1>My Wish List</h1> <p>Things that i would like to own some day</p> <ul id="list"> <li>Mercades</li> <li>House</li> <li>Dog</li> </ul> </body> </html>
    Basic html page

    1.0

    Transitional//EN"

    HTML

    HEAD

    BODY

    META

    TITLE

    H1

    UL

    LI

    LI

    LI

    The element tree of a website.

    The <body> and the <head> tags are child elements of the parent <html> tag. The <h1>

    and <p> are child elements of the <body> tag and siblings of each other. The <ul> is also a parent even though it is a child of the <body> it is also the parent of the <li>. The <li> tags are siblings of each other. You can see the elements of the document object as a family tree but more accurately you could call it a node tree. If you see the document as a network of nodes all branching off into different node types these nodes are all branches of the node tree. There are many different node types we are going to focus on three, these are: Element Nodes The <p> <ul> <head> <body> are all element nodes. These elements are the basic building blocks that make up the structure of the document. Elements can contain other elements. All the <p> elements are contained within a paragraph element. Text Nodes Element nodes by themselves wouldn't make for good viewing. Although having just element nodes would form a basic structure, it would be fairly void of anything. When you create a <p> with some text between them like: <p>This is some text</p> This text within the element node would be called the text node. Attribute Nodes Attribute nodes give more information to our element nodes. They can be used on lots of element to specify what that element contains.

    Element Node P

    Title Attribute Node

    Text Text Node

    An Element Node containing a Attribute Node and a Text Node.

    The following are some handy DOM methods: document.getElementById(); document.getElementsByTagName(); object.getAttribute(attribute); object.setAttribute(attribute, value);

    This is how you can use HTML, CSS and Javascript together in one song. If you create a paragraph tag like so and then give it a class. <p class="special">This is a special paragraph</p> <h1 class=special>So is this</h1> Access and style the paragraph with a selector: .special { text-size: 40px; color: #000; } You can also apply a style to a specific element with that class. h1.special { text-transform: uppercase; } Now using this CSS selector you can target a specific element with a JavaScript method: Using the getElementById() method you can gain access to all the elements with a specific tag. Using a FOR loop and the getAttribute() method you can display information about the attributes of an element. If we take the previous basic HTML page we could traverse the <ul> and get the data from the <li> and store them in a variable. <ul id="list"> <li>Mercades</li> <li>House</li> <li>Dog</li> </ul>

    <script type="text/javascript" src="getElement.js"></script> Adding this <script> tag between the opening and closing <head> tags mean you can link to an external JavaScript file, like the one above. You will notice a few different properties within the above example. .childNodes The childNode property allows you to get information about the children of any element node within the document node tree. .nodeValue The .nodeValue property allows you to get and set the value within a text node.

    This is just a small amount of what you can do with the DOM. I have just mentioned four of the document.object methods, there are loads more! Using HTML5, CSS, and Javascript you can create amazing sites with clean unobtrusive code. This goes a long way to future proofing your site and allowing for easy integration of new revisions later down the line.

    Anda mungkin juga menyukai