|
// retoor <retoor@molodetz.nl>
|
|
|
|
import "html" for Document, Element, NodeList
|
|
|
|
System.print("=== HTML DOM Demo ===\n")
|
|
|
|
System.print("--- Parsing HTML ---")
|
|
var html = """
|
|
<html>
|
|
<head>
|
|
<title>My Page</title>
|
|
</head>
|
|
<body>
|
|
<div id="main" class="container">
|
|
<h1>Welcome</h1>
|
|
<p class="intro">Hello World!</p>
|
|
<ul>
|
|
<li>Item 1</li>
|
|
<li>Item 2</li>
|
|
<li>Item 3</li>
|
|
</ul>
|
|
</div>
|
|
<footer>
|
|
<p>© 2024</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
var doc = Document.parse(html)
|
|
System.print("Document title: %(doc.title)")
|
|
System.print("Has body: %(doc.body != null)")
|
|
System.print("Has head: %(doc.head != null)")
|
|
|
|
System.print("\n--- Querying Elements ---")
|
|
var mainDiv = doc.getElementById("main")
|
|
System.print("Found #main: %(mainDiv.tagName)")
|
|
System.print("Class name: %(mainDiv.className)")
|
|
|
|
var intro = doc.querySelector(".intro")
|
|
System.print("Intro text: %(intro.textContent)")
|
|
|
|
var listItems = doc.querySelectorAll("li")
|
|
System.print("List items count: %(listItems.count)")
|
|
for (item in listItems) {
|
|
System.print(" - %(item.textContent)")
|
|
}
|
|
|
|
System.print("\n--- DOM Traversal ---")
|
|
var h1 = doc.querySelector("h1")
|
|
System.print("H1 parent: %(h1.parentElement.tagName)")
|
|
System.print("H1 next sibling: %(h1.nextElementSibling.tagName)")
|
|
|
|
var ul = doc.querySelector("ul")
|
|
System.print("UL first child: %(ul.firstElementChild.textContent)")
|
|
System.print("UL last child: %(ul.lastElementChild.textContent)")
|
|
System.print("UL has children: %(ul.hasChildNodes())")
|
|
|
|
System.print("\n--- Creating Elements ---")
|
|
var newP = doc.createElement("p")
|
|
newP.textContent = "New paragraph"
|
|
newP.className = "dynamic"
|
|
newP.setAttribute("data-index", "1")
|
|
|
|
mainDiv.appendChild(newP)
|
|
System.print("Added new paragraph to main div")
|
|
System.print("Main div children: %(mainDiv.children.count)")
|
|
|
|
System.print("\n--- Modifying Content ---")
|
|
var footer = doc.querySelector("footer p")
|
|
System.print("Footer original: %(footer.textContent)")
|
|
footer.textContent = "Updated footer"
|
|
System.print("Footer updated: %(footer.textContent)")
|
|
|
|
System.print("\n--- Working with Attributes ---")
|
|
var div = doc.getElementById("main")
|
|
System.print("ID: %(div.id)")
|
|
System.print("Has class attr: %(div.hasAttribute("class"))")
|
|
|
|
var classList = div.classList
|
|
System.print("Classes: %(classList.join(", "))")
|
|
|
|
div.setAttribute("role", "main")
|
|
System.print("New role attr: %(div.getAttribute("role"))")
|
|
|
|
System.print("\n--- Cloning Nodes ---")
|
|
var clone = intro.cloneNode(true)
|
|
System.print("Cloned text: %(clone.textContent)")
|
|
System.print("Clone has parent: %(clone.parentNode != null)")
|
|
|
|
System.print("\n--- Selector Matching ---")
|
|
System.print("H1 matches 'h1': %(h1.matches("h1"))")
|
|
System.print("H1 matches '.intro': %(h1.matches(".intro"))")
|
|
|
|
var closest = intro.closest("div")
|
|
System.print("Intro closest div: %(closest.id)")
|
|
|
|
System.print("\n--- Serialization ---")
|
|
var smallHtml = "<div><p>Test</p></div>"
|
|
var doc2 = Document.parse(smallHtml)
|
|
System.print("Serialized: %(doc2.outerHTML)")
|
|
|
|
System.print("\n--- Complex Selectors ---")
|
|
var byTag = doc.getElementsByTagName("p")
|
|
System.print("All p elements: %(byTag.count)")
|
|
|
|
var byClass = doc.getElementsByClassName("intro")
|
|
System.print("Elements with .intro: %(byClass.count)")
|
|
|
|
var descendant = doc.querySelector("div p")
|
|
System.print("div p found: %(descendant != null)")
|
|
|
|
var child = doc.querySelector("div > h1")
|
|
System.print("div > h1 found: %(child != null)")
|
|
|
|
System.print("\n=== Demo Complete ===")
|