It takes a callback which will run when that event is triggered. This property attaches an event listener to your element. You use this property to access the text content of an element. Var div = document.querySelector( 'div' ) ĭiv.appendChild('p') The innerHTML property If it already exists, it will be moved from its previous position to the position of the last child. The child to be inserted can be either a newly created element or an already existing one. It adds an element as the last child to the HTML element that invokes this method. You use this element to access one or more elements by their HTML tag name. You use this method to access one or more elements by their HTML tag name: first div Īnother div divs = document.getElementByTagname("div") The appendChild() element You use this method to get an element from the document by its unique id attribute: first div Īnother div var firstDiv = getElementById("first") The getElementsByTagname() method You use this method to create a specified element and insert it into the DOM: first divĪnother div var thirdParagraph = document.createElement('p') The getElementById() method Paragraphs.forEach(paragraph => paragraph.display = 'none') The createElement() method another div var paragraphs = document.querySelectorAll( 'p' ) You use this method to access one or more elements from the DOM that matches one or more CSS selectors: first div In addition to the property and method included in the code snippet, let's take a look at some of the other popular ones: The querySelectorAll() method You can access all of these elements in JavaScript with the set of properties and methods the DOM API provides. var username = //Gets the username inputĪlright. Let's look at a simple demonstration that shows how a script can access the contents of an HTML document through the DOM: Login to your account Source Īfter the document, you place a dot followed by a property or method. It has properties and methods which you can use to get information about the document using a rule known as dot notation. The main object is the document object, which in turn houses other objects which also house their own objects, and so on. It represents the web page using a series of objects. The DOM is a tree-like representation of the web page that gets loaded into the browser. First, you need to reference those elements from your JavaScript. It does this by communicating with the browser using the properties, methods, and events in the interface called the Document Object Model, or DOM.įor example, say that you want a button to change colours when it gets clicked or an image to slide when the mouse hovers over it. So to make an HTML document more interactive and dynamic, the script needs to be able to access the contents of the document and it also needs to know when the user is interacting with it. Just like how the television can't do much for itself, JavaScript doesn't do much more than allow you to perform some calculations or work with basic strings. And in the same way, JavaScript makes the HTML page active and dynamic via the DOM. You make the TV active and dynamic via the remote. The remote serves as the bridge which allows you interact with your television. To do that, there has to be a way for you to interact with your television. You don't like the show that's being streamed, and you want to change it. Every JavaScript tutorial mentioned it, but I didn't know what it meant.įast forward two years, and now that I know what it's all about, I am going to explain what the Document Object Model is in plain and simple English. When I started out as a web developer, people often threw around the term "DOM" in the industry.
0 Comments
Leave a Reply. |