I'm using the frameElement.id JavaScript property to make some changes to the page when nested in a particular iFrame.
There is a case where I have an iFrame with that ID nested in an iFrame with that ID. So it looks like:
Main Page:
<body>
<iframe src="url.htm" id="show_body_only"></iframe>
</body>
url.htm:
<body>
<iframe src="url2.htm" id="show_body_only"></iframe>
</body>
Just wondering if this is semantically correct.
Please do not berate for all the iFrames, I had little choice.
As far as CSS, the spec says:
no two such attributes can have the same value in a conformant document
If the frames explicitly share stylesheets, then the IDs will be applied separately since each frame is its own document.
As far as the DOM, the spec says:
The getElementById(elementId) method must return the first element, in tree order, within context object's descendants, whose ID is elementId, and null if there is no such element otherwise.
A node's node document can be changed by the adopt algorithm.
If the frame nodes are imported and adopted, then getElementById returns the first match.
References
CSS3: ID Selectors
DOM4 Concepts: node document
Document.adoptNode()
DOM4 5.2.2: Interface NonElementParentNode
Related
Why isn't getElementById() part of a DOM element when at the same time it is a part of a DOM document, keeping in mind that document stands higher in a hierarchy than an element. How exactly is getElementById() implemented in machine code of browsers?
?
id values must be unique in the document, so there's very little need to look for an element by id within another element. Just look for it on the document.
In the rare case you need to look for an element by id only within another element's descendants, you can use querySelector with an ID selector:
const e = someElement.querySelector("#the-id");
...but again, it's a rare use case that likely suggests that ids are being misused.
I have a html document containing an inline SVG with some <foreignObject>s in it. Those all have an own <body> tag.
Now I want to find the top <body>.
A simple solution would be
document.getElementsByTagName("body")[0]
but this seems to be inefficient (because it would first select all bodies and then drop all but the first) and I'm not quite sure if it's really reliable (is the ordering in such a set actually defined or may this change with other/newer browsers?)
Can see someone another way which is both efficient and reliable?
Your HTML document doesn't actually have multiple bodies as you allude to in the title, despite what the presence of body elements within the foreignObject elements might suggest.
Your HTML document still has only one body, its own body element, of which the foreignObject elements are descendants. This is always represented by document.body.
According to the documentation, getElementsByTagName:
Returns a NodeList of all the Elements with a given tag name in the order in which they would be encountered in a preorder traversal of the Document tree.
So, "is the ordering in such a set actually defined?". Yes, it returns the elements in the order they appear in the tree structure.
Reference: https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName
You can use document.body element which returns the <body> element.
if you need the <html> element then the documenut.documentElement can be used
so, html elements such as <title>are sometimes referred as property, but sometimes they are referred as objects. i am kinda confused. are html elements properties of document object? or are they objects? or are they both at the same time? thanks. to make question meet quality standards i will add some random codes.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The document itself is a document node.
All HTML elements are element nodes.
All HTML attributes are attribute nodes.
Text inside HTML elements are text nodes.
Comments are comment nodes.
In the HTML DOM, the Element object represents an HTML element.
DOM w3schools
The document object has a title property, which is a string, which is an object. But the document object does not have direct properties for the html elements in the page, that's why you have accessor functions like document.getElementById('id'), which return objects representing html elements. Open up a console in chrome and type document. to see all the properties the document object has. Also see that document.title and document.getElementByTagName('title')[0] do not return the same thing.
The DOM, or Document Object Model is a tree. The HTML document available at window.document is the root node of this tree.
Essentially everything else in the document is a node somewhere in this tree, whether it is an element like <p> or an attribute node like class="foo" or a text node. Each of these nodes are objects that you can interact with via Javascript.
They are two separate things.
Element is the HTML element or tag.
Javascript and jQuery (which is also Javascript), for example, modify and control the HTML elements by using the HTML DOM (HTML Document Object Model). The DOM contains the Objects you're referring to. Each DOM object refers to an element and when the Javascript modifies your HTML page, it's actually accessing the DOM, not the HTML elements.
Take a look at: http://www.w3.org/TR/DOM-Level-2-Core/introduction.html.
Can anyone give me details on each?
for example?
Is #ID an attribute or property or selector or anchor?
Is default property and default attributes are different thing?
Are all these Tags or elements?
What we will say to this
<img src="angry.gif" alt="Angry face" title="Angry face" />
This
<div>.....</div>
and these
<br /> , <hr />
Syntax , Tag or elements?
Thanks in advance.
In:
#menu ul li {
display: inline;
}
we have:
Selector: #menu ul li;
Property: display;
Property value: inline.
In:
<ul id="menu">...</ul>
we have:
Element or Tag: <ul>;
Attribute: id;
Attribute value: menu.
Edit: Ok, to address this issue of tags vs elements.
Both the XML and HTML 4.01 specifications use the terms:
Start Tag: <ul>;
End Tag: </ul>; and
Element <ul>...</ul>.
However, in colloquial usage, such distinctions are so rare that there are arguments about it. In normal use the terms are interchangeable even though that it not their precise definition.
You are basically asking about context.
Attribute
An id, in the context of an element, is an attribute. This is true both for XML and DOM context. So when I say "What is that element's ID?" I'm referring to the element's id attribute.
Selector
If I am using an attribute to add style to the document, I'm using a selector. A selector is the way in which I select the thing (whether it is an element or an attribute) that I want to apply the style rule to.
Tag,
and I'm still fuzzy on this, refers either to the actual type of element, or the literal bit of code itself. So I can say "You forgot to close that div element" or I can say "you need a closer tag on that div". So a tag is what designates what the element in question is.
The element
itself is, most loosely, the opening tag, the closing tag (in any) and the text in between (if any). But more strictly, it is also any attributes of that element. The attributes may change (perhaps you use a script to swap out where an img element's src points) and that doesn't make it a different element, but the element still has that attribute and thus it is part of the element, even if only for a short time.
Properties
are an aspect of Object-Oriented programming. In the context of Javascript, a property could be part of an object that never gets output at all to the user or inserted into the HTML. You may have a special class in your script for converting data that the user enters. Once you get the property of the object, you then might run it through some other function before finally outputting back to the user. The reason you may hear of properties in terms of HTML is because of how Javascript interacts with the document as a "Document Object Model" (DOM). If you define a variable as "document.getElementById("blah"), that variable is now holding an object, and various properties in that object will coorespond to various aspects of that element, some of which may be pre-defined attributes, such as the border color or value, and other things not defined at the HTML level, such as it's position on the screen or rendered font height.
In Web Programming (JavaScript, PHP, HTML, CSS...), then properties and attributes are all name-value pairs, with the difference in context/usage:
Properties: a set of name-value pairs which defines an OOP object (JavaScript, PHP, ..). E.g.: PERSON object is defined by {name=John, age=25, sex=Male, address=TwinTower - Room 911, SSN=123456789}
Attributes: a set of name-value pairs which define a Data object (e.g. DOM element in HTML, XML, ...). E.g.: < table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#D5DCE5" frame="border" rules="groups" class="box">< / table > is a DOM element consisted of a set of 8 attributes: {width, border, cellpadding, cellspacing, bordercolor, frame, rules, class}
Element: a branch or leaf of a DOM tree.
Tag: the name of an element. A DOM tag comes with a pair: an opening tag and a closing tag.
In the example below:
a tag-pair is anything of < TagName >< / TagName >, for example < Company > is an opening tag.
an element is anything between (including) the tag-pair, for example < Company >...< / Company >, or < TwoWheel >...< / TwoWheel > are the elements.
an attribute is a pair of name=value, for example logo="GreatCar".
a property does not make sense in this Data object, but if you model that in an OOP Object, then you can have a property of boss="JohnSmith" inside the object Company.
Example:
<Company name="GreatCompany" boss="JohnSmith">
<Address>
</Address>
<Products>
<Automobile>
<FourWheel mark="car" logo="GreatCar">
</FourWheel>
<TwoWheel>
<CityRunner></CityRunner>
<JungleRunner></JungleRunner>
</TwoWheel>
</Automobile>
<Airplane>
</Airplane>
<Products>
</Company>
Hope that helps
Cuong Huy To
I have a question about DOM objects.
What I have learned is that everything in a document are objects?
<form name="myform" action="script.js">
<input type="text">type something</input>
</form>
If we look at the example, is form an object with properties name and action?
But are name and action themselves also objects? i don't quite understand the difference between objects and properties.
And what is the difference between object element and node?
I know basics of html, css, javascript and dom. but can someone describe the big picture for me here how these parts are communicating with each other.
because there are so many elements, properties and methods. so im all lost
Seems to me your trouble is not understanding the concept behind object-oriented programming. JavaScript is an object-oriented language. You should probably take a quick tour of the concepts.
Briefly, though, objects are a way to encapsulate both data (the "properties" you are referring to) and functionality (the "methods" or "functions" you can ask an object to perform).
In the case of the JavaScript DOM, there is a tree of objects, where each object contains properties that are, themselves, objects. So you can have a Form object with methods like onSubmit() and properties like "elements", which is an array of form fields. Each element in the array is another object, like perhaps a TextField object or a Checkbox.
So now you know about objects. One thing about objects is that they can inherit properties from a parent class of object. For example, in JavaScript, there is an Element class and each of the form field objects is an instance of a "subclass" of the Element class. So, since Element defines the "name" property, and TextField and Checkbox and all their friends inherit from Element, they all automatically have this "name" property available too.
The term "node" refers to a particular location in a tree or graph structure. In this case, the DOM (Document Object Model) defines the types of objects that are allowed to be nodes in the tree that represents the webpage. For each webpage you visit, the browser constructs a "DOM tree", which is a big tree of objects representing each of the elements in the webpage.
Notice that HTML is naturally in a tree-like structure: the html tag contains head and body, the head tag contains title, meta, and script tags, the meta tag contains attributes like name and content. All this is arranged by the browser into a tree of objects, and that is what you are manipulating when you use JavaScript to do DOM programming.
So to recap: objects are the fundamental representation of data and functionality in JavaScript. Elements are particular classes of object that are subclasses of the "Element" class, and which represent some kind of form field. These can be found in the form.elements array, which is a property of the form object. Finally, nodes are points in the tree of tags, text, script, and other objects that make up a webpage.
Hope it helps!
I've taught people about the DOM before and found that seeing the DOM in action.
Go get firebug, if you don't have it.
http://getfirebug.com/
After you of course restart Firefox...
Open up any web page and right-click on something, there will be an option called "Inspect Element". This will display the rendered code of the page. When I say rendered I'm referring to the page after it has been modified by any javascript, different from the standard source code which is just the straight HTML sent from the server.
The element which you are inspecting will be highlighted. Now, right click on that highlighted element and select "Inspect in DOM Tab".
Once you're in the DOM tab, this shows you all of the properties of the element you inspected. In here you may see attributes of the element like type="input", methods of the element like focus(), maybe custom prototypes, Firefox proprietary attributes, and much much more.
Here are some methods, functions, and attributes on your need to know list, look these up in the Mozilla Developer Center. Spend some time writing scripts which move you around the DOM and allow you to alter it using these, don't use innerHTML to do anything.
createElement
createTextNode
appendChild
insertBefore
removeChild
cloneNode
setAttribute
removeAttribute
getElementById
getElementsByTagName
childNodes
firstChild
lastChild
nextSibling
hasChildNodes
tagName
attachEvent (IE) / addEventListener (all others)
detachEvent (IE) / removeEventListener (all others)
HTML attributes are exposed as
properties on the element object.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html
http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614
Element = object, property = attribute. A method is just an invocable property, eg onclick.
<form
onsubmit="alert('hi');"
id="contact-form"
>
onsubmit is a method, id is a property, form is a node with a node type of 1 which means it's an HTMLElement and inherits generic HTML properties.
in your example, the name and action are attributes of the form object.
if you had something like this in a JSP page
<form name="frm" action="somepage.jsp" onSubmit=" return validateForm();">
<input type="text" name="txtField" id="txtField"></input>
<input type="submit" value="submit"></input>
</form>
and a js function defined like so that checks to see if any text was entered into a text box.
<script>
function validateForm(){
if(document.frm.txtField.value="")
return false;
else
return true;
}
</script>
you can use the document object to access the form object in the dom and from that access the input element held by the form.