Why is the following code NOT working without id or name attribute specified for the anchor element?
<html>
<body>
First link
<p>innerHTML of the first anchor:
<script>document.write(document.anchors[0].innerHTML);</script>
</p>
</body>
</html>
But if I add an id (or name) attribute, like that:
<a id="first" href="#">First link</a>
It starts to work.
Why is id or name attribute so important? I don't refer to it in my javascript code. I don't use "getElementById" or anything, but it still wants an id to be specified.
P.S. I tested only in IE7 (not the best browser, but I don't have access to anything better at the moment, and it can't stop me from learning :)
UPDATE:
Thanks to Raynos who gave me an idea of HTMLCollection in his answer, I've gotten a deeper understanding of what's going on here, by searching the web.
When we use document.anchors collection, we're actually referring to a collection of a elements with the name attribute that makes an a element behave as an anchor, and not (only) as a link.
We don't have to specify the name attribute if we want to refer to a elements as links. In this case we just need to use a different instance of HTMLCollection object which is document.links.
So the original code will work without name attribute if we modify it to:
document.write(document.links[0].innerHTML);
What a nice feeling of enlightenment! :)
WHATWG says:
The anchors attribute must return an HTMLCollection rooted at the Document node, whose filter matches only a elements with name attributes.
the document.anchors collection needs <a> elements with a name attribute.
IE is known to have bugs where it treats id's and name's as the "same" thing. So that would probably explain why it works for <a> elements with an id attribute.
As an aside, document.write and .innerHTML are evil.
Why don't you use this:
document.getElementsByTagName('a')[0].innerHTML
Related
In Chrome DevTools, the element tab shows the constructed DOM and I can click on elements in the DOM which also highlights the element on the page. Image of both versions shown in DevTools
If the DOM shows:
<input class="gLFyf">
Then the page highlight will show:
input.gLFyF
I realise these are two ways of writing the same thing, I also realise the former is HTML style and the latter follows CSS conventions. However, I lack the vocabulary to properly refer to either.
What do I call each format?
Eg. would it make sense to refer to <input class="gLFyf"> as HTML syntax and input.gLFyF as CSS syntax? Is there a more widely accepted way to differentiate and name them?
gLFyf is the name of the class which is an attribute that can be referred to in the stylesheet to match styles with elements of that class on the page.
A class leads with a period (.) - whereas an ID would lead with a hash (#).
So .gLFyf is a class.
And #gLFyf would be an ID.
It is a class, whether viewing HTML markup or the DOM inspector. They both refer to the same thing as you already state.
This may be of some use/reference.
I have an element that have no Id defined. Class name do not allow me to identify the element uniquely.
That's why I would like to locate it using role or header property:
<p-dialog header="Deleting" showeffect="fade" role="dialog"
class="ng-tns"> </p-dialog>
How should I do that in Protractor / Selenium Webdriver?
I can do that by means of xpath, but as I understand it's rather suggested to avoid it at all.
Do I need to define my own locator using addLocator or is there simpler solution?
Protractor recommend to use css selector as first option, xpath as the secondary option when css selector can resolve your problem in some cases.
The primary reason of such recommendation considered followings:
xpath is not fast than css selector
xpath is case sensitive in some browser
for lower IE, like 6 not support xpath natively
xpath generally is longer than css selector to find same element
But css selector has two shortage which xpath is able to do:
can't find element by text
can't find parent element (only can find downward)
For your case, you can try following locator:
// css selector
p-dialog[header="Deleting"]
p-dialog[role="dialog"]
p-dialog[header="Deleting"][role="dialog"]
I need to create the element and then delete it. Is there a way to find the element by it's text after it was created?
The xpath of the element is //div[#id='mif-tree-6']/span/span[3].
You can use xpath for it for example. Like:
//div[#id='mif-tree-6']//span[contains(text(),'your_text_here')]
UPDATE
Please provide an example of your html. It is possible to find a parent of your element with xpath and after that to find all the childs. For example your html =
<div id='lol'>
<div>first_item</div>
<div>second_item</div>
<div>third_element</div>
</div>
You get an array of elements with xpath =
//div[contains(text(),'first_')]/../div
So you can do something like:
click | //div[contains(text(),'first_')]/../div[2]
BUT if there are a lot of brothers-elements to find by text of one sibling it will be necessary to use loop to get every of them.
Once again. If you will provide full information about what are you doing and an example of your html it will be much easier to suggest.
Using as a reference: https://support.google.com/webmasters/answer/146750?hl=en
You will notice under 'Product' that there is a category Property, and furthermore there's an example on down the page:
<span itemprop="category" content="Hardware > Tools > Anvils">Anvils</span>
which I've mimic'd exactly:
<span itemprop="category" content="kitchen sinks > stainless steel sinks > undermount">undermount</span>
Yet when I test it with Google's structured data tool, I get the error:
Error: Page contains property "category" which is not part of the schema.
I realized in the example also, it's using data-vocabulary.org→Product, where I'm using schema.org→Product.
Now on http://schema.org/Product, it does not have category anywhere mentioned. Does schema.org not offer categories? Or am I missing something?
category is an itemprop of schema/Offer, not schema/Product
To fix your problem, place an offer within the product, and attach the category to the offer.
Note: You are using a content attribute on span, which is not valid in HTML5 or Microdata (but in RDFa).
Schema.org has a category property, but it can not be used on Product. Depending on your content, you may want to use Offer instead of Product (see also my answer with an example use of category).
I've been working on JSON-ld & microdata a lot recently, and I believe in your case 'category' needs to be placed in a meta tag, not span/div tag, preferably before your item. Logically, your need to identify 'undermount' is redundant as it would already be included within your content. Oddly, the schema type service has 'serviceType' as a property, but product does not have an equivalent, otherwise that could have been another workaround. For your content 'undermount' use itemprop="name" within your span, no content within that tag necessary.
<meta itemprop="category" content="Hardware > Tools > Anvils > Anvils" />
Here is the correct format accepted by schema.org...
I am trying to get the anchor tag from an anchor element link in the page eg
<a href="/page#reviews">
Is it possible to access the href so I can isolate #reviews and use it elsewhere in my Tritum script?
Thanks!
Yes, it's possible, using a two step process.
First, you can grab the value of the href attribute using the fetch() function.
Then, working on the isolated string, you can use regular expressions to replace all the characters that occur in front of the hash/pound sign (#) with a blank.
Here's an example using the Tritium Tester: http://tester.tritium.io/52503bcbe166ca7affa4944d90aae39808c8cd8e.
Note: This assumes that everything after the first # sign in the href attribute is what you're looking for.