Scribd
Upload
39 views

PHP DOM Element Problem

The document describes building a DOM tree recursively using an Element class. The Element class represents an HTML/XML tag and has properties like a tag name, boolean for closing tag, attribute array, and child element/string array. The class constructor initializes these properties. The addChild() method adds a child to an element's array. The toString() method returns an HTML string of the element's DOM tree. Sample code shows creating Element objects to build a login form DOM tree and outputting it via toString().

Uploaded by

MecheşSebastian
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

PHP DOM Element Problem

The document describes building a DOM tree recursively using an Element class. The Element class represents an HTML/XML tag and has properties like a tag name, boolean for closing tag, attribute array, and child element/string array. The class constructor initializes these properties. The addChild() method adds a child to an element's array. The toString() method returns an HTML string of the element's DOM tree. Sample code shows creating Element objects to build a login form DOM tree and outputting it via toString().

Uploaded by

MecheşSebastian
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Build a DOM similar recursive data structure under a class named Element.

The Element class represents an HTML/XML tag that defines a DOM tree. An example:

<elementtagname att1="val1" att2="val2" att3="val3" ... >


<childelement1 att1=”val1” att2=”val2”>
…
</childelement1>
<img att1=”val1” att2>
…
<childelementN>
<p class=”hey” …>
Hello world!
</p>
</childelementN>
</elementtagname>

-you may see there are elements with or without closing tag (</elementclosingtag>)
-you may see there are attributes of elements that have or don’t have a value (att2)
-you may see there can also be terminal string nodes(“Hello world!”).

Each element:
-has its own tag name;

-may or not have an ending tag. Elements that don’t have ending/enclosing tag are known as standalone
elements. That can be known using a private boolean variable, for example.

-an array of key-value attributes. There can also exist attributes that have empty value inside, for example
see “checked” attribute: <input type=”checkbox” checked>

-an array of element objects, that represents its direct children inside the DOM. Children in this array can
be other element objects are the same type as the parent object, having their own name, attributes and
children elements etc.
-Remember, children in an element's children array can also be bare string terminals:
example: <p class="blue-p">
I am a blue text.
<span style="color: red">But i am red.</span>
</p>
Up here, the p element has two children:
-one that is a string
-one that is an element, having another single child being a string.

Requirements:
-Define the Element Class, its fields and constructor.
The constructor can be done such:

public function __construct($tagname, $isStandalone, $attributes) {


//…
//initialize fields and children list to empty in the beginning
}
-Children elements or strings can be added to the parent element with the “addChild()” method. Make
sure to verify that $child is either instance of Element or is a string. Also make sure that children may NOT
be added to standalone elements (that do not have enclosing tag).

public function addChild($child) {


//adds child to the children list
}

-The element class should also have an instance method named “toString()”. This method will return the
HTML string representation of the DOM tree stored in the corresponding Element object.

Example of usage

$element_div_root = new Element(


‘div’,
true,
array(
‘class’=>’redcontainer’,
’style’=>’background-color: red; padding: 12px’
)
);

$element_img = new Element(


‘img’,
false,
array(
‘src’=>‘../images/login.png’,
‘alt’=>’no-path’
)
);

$element_input_username = new Element(


‘input’,
false,
array(
‘name’=>’username’,
‘type’=>’text’,
‘placeholder’=>’Your username...’
‘required’=>null
)
);

$element_input_password = new Element(


‘input’,
false,
array(
‘name’=>’password’,
‘type’=>’password’,
‘placeholder’=>’Your password...’
‘required’=>null
)
);

$element_div_btn = new Element(


‘div’,
true,
array(
The code above should return the following HTML string, with the help of toString method, that represents
our DOM tree:

<div class="redcontainer" style=”background-color: red; padding: 12px”>

<img src="../images/login.png" alt="no-path">

<input name="username" type="text" placeholder=”Your username…” required>

<input name="password" type="password" placeholder=”Your password…” required>

<div class=”btn”>

Log In

<i class =”fa fa-download icon”>

</i>

</div>

</div>

By echoing this into the browser, you may see the DOM tree that was build using inspect element.

You might also like