Unlike id which is available to all tags name is limited to certain form

Unlike id which is available to all tags name is

This preview shows page 3 - 10 out of 19 pages.

Unlike id which is available to all tags, name is limited to certain form related tags. a, input, textarea, form src Links to an external URL that should be loaded into the page (as opposed to href which is a link to follow when clicked) img, input, iframe, script value The value is related to the value attribute of input tags. Often the value of an input field is user defined, and we use value to get that user input. Input, textarea, submit
Image of page 3
4 Modifying the DOM Modifying the DOM: Changing an Element’s Style More Code Examples , Next two examples NOT from textbook , Example 1: produce an outline of the HTML document , Example 2: swap two entries Example 1: Produce a Document Outline Example HTML document Function we will write that will use Node methods and properties to produce string representing Element tree
Image of page 4
5 Example 1: Produce a Document Outline , String produced by TreeOutline() : Example 1: Produce a Document Outline , “Walk” the tree of an HTML document Reference to html element is contained in documentElement property of document object Use Node -defined methods to recursively create an outline of nodeName ’s: Depth in tree Example 1: Produce a Document Outline Example 2: Document Tree Modification Initial rendering After user clicks first list item
Image of page 5
6 Example 2: Document Tree Modification Find the li Element following the selected one (if it exists) Example 2: Document Tree Modification Returns null if no next sibling Example 2: Document Tree Modification Converting null to Boolean produces false Example 2: Document Tree Modification Swap nodes if an li element follows
Image of page 6
7 Example 2: Document Tree Modification Operate on a node by calling methods on its parent Example 2: Document Tree Modification Remove following element from tree Re-insert element earlier in tree Modifying the DOM: Child/Parent Relationships Modifying the DOM: Change an Element’s Content document.getElementById("here").innerHTML = "foo<em>bar</em>";
Image of page 7
8 Modifying the DOM: Creating DOM Elements Modifying the DOM: Creating DOM Elements Tool Support for JavaScript Development , Standalone JavaScript development environments Google JavaScript IDE 2019 for a list of them , Most browsers support tools to help with developing and testing/debugging JavaScript Debuggers Profilers (for performance evaluations) , Standalone tools such as Linters Check code for syntactical and stylistic correctness Events
Image of page 8
9 Events JavaScript event is an action that can be detected by JavaScript Many of them are initiated by user actions Some are generated by the browser itself. We say that an event is triggered and then it is handled by JavaScript functions Events: Event Handling Approaches – Inline Hook Not recommended: Why? Events: Event-Handling Approaches – Event Property Approach var myButton = document.getElementById('example'); myButton .onclick = alert('some message'); Separates JavaScript code and HTML markup, above code could be in separate JS file Events: Event-Handling Approaches – Event Listener Approach var myButton = document.getElementById('example');
Image of page 9
Image of page 10

You've reached the end of your free preview.

Want to read all 19 pages?

  • Fall '09
  • KUNZ

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture