Working with DOM elements

by · Published · Updated

Everything is node in HTML Document. Node can be of below types.

  1. document node
  2. element node
  3. text node
  4. attribute node
  5. comment node

Node object has below properties.

  1. nodeName – Name of the node object
  2. nodeValue – value of the node object
  3. parentNode – Parent node of the current node object
  4. childNodes – returns the collection of all child nodes
  5. firstChild – first child node of current node object
  6. lastChild – last child node of current node object
  7. nextSibling – next adjacent node of current node object
  8. previousSibling – previous adjacent node of current node object

document node is the most important node object in HTML DOM.

Getting information of document

  1. document.head – returns the head element node of the document.
  2. document.body – returns element node representing body of the document.
  3. document.body.innerHTML – returns the string representation of the body of the document.
  4. document.documentElement – returns the element node object of the document.
  5. document.documentElement.innerHTML – returns the HTML of the entire document.

Creating nodes
We can create nodes using below methods of document object.

  1. createTextNode – This is used to create a text node
  2. createElement – This is used to create an element node
  3. createAttribute – This is used to create an attribute node
  4. createComment – This is used to create a comment node

Adding, removing, replacing nodes

You can use below methods to add and remove nodes.

  1. appendChild
  2. insertBefore
  3. removeChild
  4. replaceChild

Document nodes properties

  1. document.getElementById – This method will return the element with given id
  2. document.getElementsByTagName – This method will return all elements with given tag name.
  3. document.getElementsByClassName – This method will return all elements with given class name.
  4. document.querySelectorAll – This method will return all elements with given CSS selector.

Below example prints the count of “table” tags.

console.log (document.getElementsByTagName(“table”).length)

Below example prints the innerHTML of the first  “table” .

console.log (document.getElementsByTagName(“table”)[0].innerHTML)

We can also use below properties of document to directly access certain element nodes.

  1. document.head
  2. document.body
  3. document.forms – This property gets you the list of all form elements in the document.
  4. document.images  – This property gets you the list of all  image (<img> ) elements in the document.
  5. document.scripts
  6. document.title – This property will get you the title of current document
  7. document.URL – This property will get you the URL of current document
  8. document.links – This property returns all links in the page(“<a>” tag elements that have a href attribute defined)
  9. document.anchors – This property will get you all the anchor elements (“<a>” tag elements that have a name attribute defined)
  10. document.embeds
  11. document.readyState
  12. document.referrer – This property gets you the URL that loaded current document.
  13. document.domain – This property is used to get the domain of the server (website name).
  14. document.cookie – This property is used to get or set the cookies.
  15. document.doctype
  16. document.baseURI
  17. document.lastModified – This property gets you the last modification time stamp of the document.
  18. document.write – This method allows you to write the document.

You can use below code to get all properties of the document object.

for (p in document) {x = x + ” ” + p }

console.log (x)

Element nodes properties

Element node can have different properties based upon type of element. For example – form element has a “action” property. But “select” element does not have such property.

Common properties and methods applicable to all types of elements

List of properties

  1. nodeType
  2. nodeName
  3. ownerDocument
  4. parentNode
  5. parentElement
  6. childNodes
  7. firstChild
  8. lastChild
  9. nextSibling
  10. previousSibling
  11. hasChildNodes
  12. name
  13. target
  14. noValidate
  15. length
  16. title
  17. hidden
  18. tabIndex
  19. accessKey
  20. spellCheck
  21. contentEditable
  22. offsetParent
  23. offsetTop
  24. style
  25. innerText
  26. outerText
  27. tagName
  28. id
  29. className
  30. attributes
  31. innerHTML
  32. outerHTML
  33. scrollTop
  34. clientTop
  35. clientLeft
  36. clientWidth
  37. clientHeight
  38. children
  39. firstElementChild
  40. lastElementChild
  41. childElementCount
  42. hasAttributes

list of methods

  1. setAttribute
  2. checkValidity
  3. getAttributeNode
  4. insertAdjancentElement
  5. insertAdjancentText
  6. insertAdjancentHTML
  7. removeAttribute
  8. getAttribute
  9. scrollIntoView
  10. before
  11. after
  12. prepend
  13. append
  14. getRootNode
  15. contains
  16. insertBefore
  17. appendChild
  18. removeChild
  19. addEventListener
  20. removeEventListener
  21. dispatchEvent
  22. click
  23. focus
  24. blur

Properties and methods applicable to only form Element

  1. elements – This property returns all elements inside form.
  2. action – This property returns the action attribute’s value. action attribute is usually used to specify the file (.php, .asp, .jsp etc) on the web server to be executed.
  3. acceptCharset – sets or gets the character set accepted by form.
  4. encType – This property gets or sets the encoding type of the form.
  5. autocomplete
  6. method – This property returns the HTTP method (Get or Post) to be used to send the HTTP request.
  7. submit – This method is used to submit the form to server.
  8. reset – This method is used to reset a form.
  9. target – This property lets you specify the target window (_self or _blank etc ) where response should be displayed.

Properties and methods applicable to only input type (text boxes) Elements

  1. alt
  2. accept
  3. autofocus
  4. disabled –
  5. checked
  6. height
  7. list
  8. minLength
  9. min
  10. max
  11. maxLength
  12. multiple
  13. required
  14. pattern
  15. readOnly
  16. placeHolder
  17. size
  18. src
  19. step
  20. type
  21. defaultValue
  22. value
  23. width
  24. labels
  25. translate

We can access the form in which specific element exists by using below line of code.

document.getElementById(“myid”).form

Properties and methods applicable to only drop down (select) elements

  1. options – returns the collection of all option elements
  2. size – sets or gets the size of drop down
  3. multiple – This property (when set to true) will let you select multiple options in the list. This is usually used with size property.
  4. selectedIndex – sets or gets the index of the selected option in the drop down
  5. remove – This method lets you remove the option specified using index.

Below line of code shows how to display the selected option in  the drop down.

<dropdownElement>.options[dropdown.selectedIndex].innerText

Properties and methods applicable to table

  1. caption
  2. tHead, createTHead
  3. tFoot, createTFoot
  4. tBody, createTBody
  5. rows
  6. rows[i].cells – Returns the collection of all cells in specific row.
  7. align
  8. border
  9. frame
  10. rules
  11. summary
  12. bgColor
  13. width
  14. cellPadding
  15. cellSpacing
  16. createCaption
  17. deleteCaption
  18. insertRow – Inserts a new row at specified index.
  19. deleteRow – Deletes the row from specified index.

To create the caption, you can use below syntax.

<tableElement>.createCaption().innerText= “This is the Table Caption”

Below example shows how to insert a new row in table.

var myRow = document.getElementById(“table1”).insertRow(1);
var myCell = x.insertCell(0);
myCell.innerHTML = “This will go in to first cell”;

You may also like...