Skip to content

Instantly share code, notes, and snippets.

@InfoSec812
Last active November 2, 2018 18:51
Show Gist options
  • Select an option

  • Save InfoSec812/94cdd6d9bbf8ba6122e469e6791a6045 to your computer and use it in GitHub Desktop.

Select an option

Save InfoSec812/94cdd6d9bbf8ba6122e469e6791a6045 to your computer and use it in GitHub Desktop.
A simple HTML document to help understand the Document Object Model
<html>
<head>
<title>My DOM PAge</title>
<script language="JavaScript">
var clickCount = 0;
function buttonClickHandler() {
clickCount++;
document.querySelector("div.another_css_class").innerHTML = "Clicked " + clickCount + " times";
}
</script>
</head>
<body>
<div class="some_css_class">Some DIV</div>
<div class="another_css_class">Another DIV</div>
<div class="button_holder">
<button type="button" onClick="buttonClickHandler()">Click Me!</button>
</div>
<div class="nested_elements">
<table>
<thead>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
</thead>
<tr>
<td>Value A - 1</td>
<td>Value B - 1</td>
<td>Value C - 1</td>
<td>Value D - 1</td>
</tr>
<tr>
<td>Value A - 2</td>
<td>Value B - 2</td>
<td>Value C - 2</td>
<td>Value D - 2</td>
</tr>
<tr>
<td>Value A - 3</td>
<td>Value B - 3</td>
<td>Value C - 3</td>
<td>Value D - 3</td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment