Scribd Logo
Upload

Welcome to Scribd!

  • CH 10-2

    Uploaded by

    nyinyilynn163
    4 views25 pages
    The document discusses JavaScript and the Document Object Model (DOM). It covers DOM node types and relationships, manipulating DOM nodes by adding, removing and replacing nodes, and working with DOM table elements and their properties. The key topics covered include the DOM node hierarchy, getting and setting node attributes, and methods for common DOM node manipulations like appendChild(), insertBefore(), replaceChild() and removeChild().

    Original Description:

    Original Title

    Ch 10-2

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses JavaScript and the Document Object Model (DOM). It covers DOM node types and relationships, manipulating DOM nodes by adding, removing and replacing nodes, and working with DOM table elements and their properties. The key topics covered include the DOM node hierarchy, getting and setting node attributes, and methods for common DOM node manipulations like appendChild(), insertBefore(), replaceChild() and removeChild().

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    4 views25 pages

    CH 10-2

    Uploaded by

    nyinyilynn163
    The document discusses JavaScript and the Document Object Model (DOM). It covers DOM node types and relationships, manipulating DOM nodes by adding, removing and replacing nodes, and working with DOM table elements and their properties. The key topics covered include the DOM node hierarchy, getting and setting node attributes, and methods for common DOM node manipulations like appendChild(), insertBefore(), replaceChild() and removeChild().

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 25

    University of Computer Studies

    Web Technology JavaScript programming

    Hierarchy of Nodes [Part-II]

    JavaScript Group
    Department of Information Technology Supporting and Maintenance
    Reference Book

    • Professional JavaScript for Web Developers , Third Edition By Nicholas C. Zakas


    General lecture Plan

    • Section 1 • Section 4
    What is JavaScript? Document Object Model(DOM)
    JavaScript in HTML DOM Extensions
    • Section 5
    Variables, Scope, and Memory
    Events, Forms and Canvas
    • Section 2 • Section 6
    Language Basics Client-side Storage
    Reference Types
    • Section 3
    Understanding Objects
    Window Object
    Outlines

    • What is DOM?
    • Hierarchy of Nodes
    • Node Type
    • Node Relationships
    • Document Object
    • Manipulating Nodes
    DOM Standard Attributes

    id, title, lang, dir (ltr, rtl) , className


    No. of Attribute
    element.attributes.length;

    eg. In Html
    <body>
    <div id= “mydiv” class=“bd” title=”Body Text” lang=”en” dir= “ltr”>
    Hello!</div>
    </body>
    DOM Standard Attributes(Cont’d)
    Using DOM
    <body>
    <script type=”text/javascript”>
    var div=document.createElement(“div”);
    div.id= “mydiv”;
    div.classname= “bd”;
    div.title=”Body Text”;
    div.lang=”en”;
    div.dir=”ltr”;
    div.appendChild(document.createTextNode(“Hello!”));
    document.body.appendChild(div);
    </script> </body>
    Getting Attribute

    Example:
    In HTML :
    <div id=”myDiv” class=”bd” title=”Body text” lang=”en” dir=”ltr”></div>
    All of the information specified by this element may be retrieved using the
    following JavaScript code:
    var div = document.getElementById(“myDiv”);
    alert(div.id); //”myDiv”
    alert(div.className); //”bd”
    alert(div.title); //”Body text”
    alert(div.lang); //”en”
    alert(div.dir); //”ltr”
    Getting Attributes (Cont’d)

    var div = document.getElementById(“myDiv”);


    alert(div.getAttribute(“id”)); //”myDiv”
    alert(div.getAttribute(“class”)); //”bd”
    alert(div.getAttribute(“title”)); //”Body text”
    alert(div.getAttribute(“lang”)); //”en”
    alert(div.getAttribute(“dir”)); //”ltr”
    <div id=”myDiv” my_special_attribute=”hello!”></div>
    var value = div.getAttribute(“my_special_attribute”);
    alert(value); //hello!
    Setting Attributes

    div.setAttribute(“id”, “someOtherId”);

    div.setAttribute(“class”, “ft”);

    div.setAttribute(“title”, “Some other text”);

    div.setAttribute(“lang”,”fr”);

    div.setAttribute(“dir”, “rtl”);
    Remove Attributes

    div.removeAttribute(“class”);
    div.removeAttribute(“id”);
    Changing Attribute Value

    to change each of the attributes by assigning new values to the properties:

    div.id = “someOtherId”;
    div.className = “ft”;
    div.title = “Some other text”;
    div.lang = “fr”;
    div.dir =”rtl”;
    Manipulating Nodes

    appendChild( ): add an HTML Element ( accept one argument: new node, add a node to end
    of childNodes list, return new node)
    insertBefore( ): accept two arguments: node to insert and node to reference, insert new node
    before reference node, return new node
    replaceChild( ): replace an HTML Element ( accept two arguments: the node to insert and the
    node to replace, return node to replace)
    removeChild( ): remove an HTML element (accept one argument: node to remove, return
    this node)
    normalize( ): joined into a single text node
    splitText( ) :splits a text node into two text nodes
    appendChild( )

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    <script type=“text/javascript”>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
    </script>
    insertBefore( )

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    <script type=“text/javascript”>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);
    var element = document.getElementById("div1");
    var child = document.getElementById("p1");
    element.insertBefore(para, child);
    </script>
    replaceChild( )

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    <script type=“text/javascript”>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child);
    </script>
    removeChild( )

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    <script type=“text/javascript”>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
    </script>
    normalize( ) Example:

    Example:
    var element = document.createElement("div");
    element.className ="message";
    var textNode = document.createTextNode("Hello world!");
    element.appendChild(textNode);
    var anotherTextNode = document.createTextNode("welcome");
    element.appendChild(anotherTextNode);
    document.body.appendChild(element);
    alert(element.childNodes.length); //2
    element.normalize();
    alert(element.childNodes.length); //1
    alert(element.firstChild.nodeValue); //Hello world!welcome
    splitText( ) Example:

    Example:
    var element = document.createElement("div");
    element.className = "message";
    var textNode = document.createTextNode("Hello world!");
    element.appendChild(textNode);
    document.body.appendChild(element);
    var newNode = element.firstChild.splitText(5);
    alert(element.firstChild.nodeValue); //“Hello"
    alert(newNode.nodeValue); //“ world!"
    alert(element.childNodes.length); //2
    Manipulating Tables

    <table border=”1” width=”100%”>


    <tbody>
    <tr>
    <td>Cell 1,1</td>
    <td>Cell 2,1</td>
    </tr>
    <tr>
    <td>Cell 1,2</td>
    <td>Cell 2,2</td>
    </tr>
    </tbody>
    </table>
    Manipulating Tables
    //create the table
    var table = document.createElement(“table”);
    //create the second row
    table.border = 1;
    var row2 = document.createElement(“tr”);
    table.width = “100%”;
    //create the tbody tbody.appendChild(row2);
    var tbody = document.createElement(“tbody”); var cell1_2 = document.createElement(“td”);
    table.appendChild(tbody); cell1_2.appendChild(document.createTextNode(“Cell 1,2”));
    //create the first row row2.appendChild(cell1_2);
    var row1 = document.createElement(“tr”);
    var cell2_2= document.createElement(“td”);
    tbody.appendChild(row1);
    cell2_2.appendChild(document.createTextNode(“Cell 2,2”));
    var cell1_1 = document.createElement(“td”);
    row2.appendChild(cell2_2);
    cell1_1.appendChild(document.createTextNode(“Cell 1,1”));
    row1.appendChild(cell1_1);
    //add the table to the document body

    var cell2_1 = document.createElement(“td”); document.body.appendChild(table)


    cell2_1.appendChild(document.createTextNode(“Cell 2,1”));
    row1.appendChild(cell2_1)
    DOM Table Properties
    The <table> element adds the following:
    caption — Pointer to the <caption> element (if it exists).
    tBodies — An HTMLCollection of <tbody> elements.
    tFoot — Pointer to the <tfoot> element (if it exists).
    tHead — Pointer to the <thead> element (if it exists).
    rows — An HTMLCollection of all rows in the table.
    createTHead() — Creates a <thead> element, places it into the table, and returns a reference.
    createTFoot() — Creates a <tfoot> element, places it into the table, and returns a reference.
    createCaption() — Creates a <caption> element, places it into the table, and returns a reference.
    deleteTHead() — Deletes the <thead> element.
    deleteTFoot() — Deletes the <tfoot> element.
    deleteCaption() — Deletes the <caption> element.
    deleteRow(pos) — Deletes the row in the given position.
    insertRow(pos) — Inserts a row in the given position in the rows collection
    DOM Table Properties

    The <tbody> element adds the following:


    rows — An HTMLCollection of rows in the <tbody> element.
    deleteRow(pos) — Deletes the row in the given position.
    insertRow(pos) — Inserts a row in the given position in the rows collection and returns a reference to the new row.

    The <tr> element adds the following:


    cells — An HTMLCollection of cells in the <tr> element.
    deleteCell(pos) — Deletes the cell in the given position.
    insertCell(pos) — Inserts a cell in the given position in the cells collection and returns a reference to the new cell.
    DOM Table Properties

    //create the table


    //create the second row
    var table = document.createElement(“table”);
    tbody.insertRow(1);
    table.border = 1;
    tbody.rows[1].insertCell(0);
    table.width = “100%”;
    tbody.rows[1].cells[0].appendChild(document.createTextNode(
    //create the tbody
    “Cell 1,2”));
    var tbody = document.createElement(“tbody”);
    tbody.rows[1].insertCell(1);
    table.appendChild(tbody);
    tbody.rows[1].cells[1].appendChild(document.createTextNode(
    //create the first row
    “Cell 2,2”));
    tbody.insertRow(0);
    //add the table to the document body
    tbody.rows[0].insertCell(0);
    document.body.appendChild(table);
    tbody.rows[0].cells[0].appendChild(document.createTextNode(
    “Cell 1,1”));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode(
    “Cell 2,1”));
    Exercise

    1. Remove a specific paragraph using Id from the div..

    2. Find an element by its id. #replace-text div inside this box: Set the text color to
    #777. Set the font size to 1rem. Set the replace content to “I can do
    <em>whatever</em> I want with JavaScript.”
    University of Computer Studies

    Thank you! 

    You might also like