I'm trying to automate the web form where I have <a> tag which is inside <th> tag. When I tried getElementByTagName("a").innerText I'm not getting the desired element/text. But when I wrote getElementByTagName("th").innerText it is showing me the exact text that I'm pointing at. But the issue is I wanted to click on the link which this text i.e <a> tag has. getElementByTagName("th").Click is not working. Can someone please help?
There's no such method as getElementByTagName().
There are: document.getElementsByTagName() and Element.getElementsByTagName(). Both return a live HTMLCollection.
In the latter Element refers to a DOM element. It allows you to search for specific tags in children of that element.
Plese refer to the following MDN documents:
Element.getElementsByTagName()
Document.getElementsByTagName()
Also, it's worth mentioning that, without document.* or anything else, the browser would assume you're trying to call window.getElementByTagName().
NOTE: I'm aware the question is tagged vba instead of javascript, but in this case it doesn't seem to matter.
Related
Trying to determine the correct syntax for using Microdata inside my breadcumbs implementation. Everything I have read seems to lean towards the fact that the breadcrumbs are structured inside an ordered or unorderd list. Mine is not.
<body itemscope="" itemtype="http://schema.org/WebPage">
...
<div class="breadcrumbs" itemprop="breadcrumb">
Home
<span class="delimiter"> > </span>
Parent Item
<span class="delimiter"> > </span>
<span>Child</span>
</div>
...
</body>
If I run it inside Google's tool it seems correct, but compared to their example it is missing a lot of elements and doesn't have the structure of their example BreadcrumbList.
I'm also a little confused about the correct properties for the links. Should they all have title and url properties?
I was looking at the examples at the bottom of the page here: http://schema.org/WebPage
The breadcrumb property expects one of two values:
Text
BreadcrumbList
If you provide a Text value (like you do in the example), you can’t provide data about each link. If you are fine with that, the Microdata in your example is correct (but it also contains RDFa, which doesn’t seem to make sense, at least not without further context; so if you didn’t add them intentionally, you might want to remove the property attributes).
If you want to provide data about each link, you have to provide a BreadcrumbList value.
For the Microdata, it doesn’t matter whether or not you use a list. If the example uses ol→li→a→span, you could as well use something like div→span→a→span. You just have to make sure to use the correct element type.
If you can’t add parent elements to the a elements, it’s still possible to use BreadcrumbList. But then you would have to duplicate the URL with a link element inside the a element.
So I was wondering if there is a way to find the element that belongs to a specific String that you know exists on a HTML page as part of an attribute. The example is I know that "Apr-16-2015" is somewhere in an attribute on the HTML page. If I go look for it, it's part of the attribute title:
<a title="Apr-16-2015 5:04 AM"
However, I do not have the information about the exact time, i.e. the "5:04 AM". I was wondering if there is a way to partially search an attribute in order for it to return the full element.
This is my code:
org.jsoup.nodes.Element links = lastPage.select("[title=\"Apr-16-2015\"]").first();
Again, it doesn't work because I did not enter the full attribute title, as given above. My question: "Is there any way to make this selector work by not entering the full information, as I will be unable to have the latter part of the attribute to my disposition?"
You can use it in the following way:
lastPage.select("[title^=\"Apr-16-2015\"]").first();
As described on JSoup Documentation:
[attr^=value], [attr$=value], [attr*=value]: elements with attributes
that start with, end with, or contain the value, e.g. [href*=/path/]
References:
http://jsoup.org/cookbook/extracting-data/selector-syntax
This is almost going to sound like a joke, but I promise you this is real life. There is a site on the internet, one which you have all used, that does not believe in css classes. Everything is defined directly in the style tag on an element. It's horrifying.
My problem though is that it also makes the html extraordinarily difficult to parse. The structure that I've got to go on looks something like this:
<td>
<a name="<random_string>"></a>
<div style="generic-style, used by other elements">
<div style="similarly generic style">{some_stuff}</div>
</div>
<a name="<random_string>"></a>
...
</td>
Basically, I've got these a tags that are forming the boundaries of the reviews, whos only defining information is the random string that is their name. I don't actually care about the anchor tags, but I would like to grab the reviews between them using xpath.
I've looked into sibling queries, but they don't seem to be well suited for alternating boundaries. I also looked into the Kayessian method of xpath queries, which (aside from having an awesome name) only seems well suited to grab a particular div, rather than all divs between the anchor tags.
Any thoughts on how I could grab the divs here?
If //td/div[../a[#name]] works for you, then the following should also work :
//td[a/#name]/div
This way you don't need to go back and forth -or rather down and up-. For a more specific selector, you may want to try the following :
//td/div[preceding-sibling::*[1][self::a/#name]][following-sibling::*[1][self::a/#name]]
The XPath selects div element having all the following properties :
td/div : is child of <td> element
[preceding-sibling::*[1][self::a/#name]] : preceded directly by <a> element having attribute name
[following-sibling::*[1][self::a/#name]] : followed directly by <a> element having attribute name
I figured it out! It turns out that xpath will allow for relative attribute assertions. I am not sure if this behavior is desired, but it happens to work in this case! Here's the xpath:
//td/div[../a[#name]]
Nice and clean, the ../a[#name] basically just says:
Go up a level, and make sure on that level of the hierarchy there's an a element with a name attribute
i'm new to html/css and completed the css/html tutorial on codeacademy. I've reread over everything i've done and have a good knowledge around why everything works the way it does except the class/id tag. If i understand correctly the class tag is useful for when a bunch of elements should all recieve the same styling and id's are useful when you have exactly one element that should receive it's own styling. The thing i don't get is then what is the point of the id tag if i can get the same result using the class tag. For e.g. i have boxes 1,2 and 3 and i want them all to be the color black aka all recieve the same styling i would use the class tag. But i change my mind and now i want box2 to be white so in theory i should change box2 to an id tag so it can receive it's own styling but the thing is i can still use the class tag and get the same result by typing .box2 color:white;
My question is what is the point of the class and id tag if i can do the same thing for both using just the class tag.
Sorry if this is a difficult question to understand. I tried to word it as best as i could.
Ids are unique, you use id only for one element
<div id="me"></div>
On the other hand classes can be used to target more than one element
<div class="book">The Alchemist</div>
<div class="book">Harry Potter</div>
id tag is actually utilized the best in JavaScript, it is used to identify a tag uniquely among a bunch of tags. You would realise the importance of id tag when you start working with JavaScripts.
Suppose you have around 50 <p> tags in your HTML code. But you want to get value of one particular <p> tag, then the obvious way to do this is making you use of id.
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
The above code checks for the tag whose id is "demo" and then assigns the output returned by Date( ) to that corresponding tag.
id is for single element.
class is for group.
if you want to change color of box2. you can alse give inline css on them because inline css priority is higher then another type
I've build a page with a form and for some reason my button for the form and my footer element is not showing up on the page.
I have added a link so you can check out my code. And I know its a HOT MESS! so if you can give me any tips on the css and html please feel free to let me know.
http://jsfiddle.net/jeramiewinchell/j6n0w1tj/
enter code here
Fair point in the edit. I said it was a mess without giving anything positive.
Here are some tips that could improve the HTML (with links for reference):
You should specify a doctype (e.g.: <!doctype html>) instead of having an empty <!DOCTYPE> tag.
http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
It would be nice to have a <html> wrapping everything, and a <head> wrapping the title and links. I'm not clear if it's technically valid not to have them (the W3C HTML validator will not validate a page without a <head> although it will validate without the <html>), but it's nice and it will help keep things organized.
The links should have a type indicating the mime type (in this case type="text/css").
http://www.w3schools.com/tags/tag_link.asp
Closing empty elements (e.g.: img, link, input) is not mandatory in HTML5, but it is in XHTML. Depending on the doctype that you choose, you should close them accordingly. Using /> at the end is valid for both HTML5 and XHTML, so you may want to consider it.
http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
Don't nest <p> tags. Paragraphs are block elements that should contain only phrasing content (= not block/paragraph elements). How to fix it: replace <p class="site_section1"> with a <div class="site_section1">.
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Always close the block tags that you open. For example, you never close the <p class="site_section1"> (altough as I said in the previous point, you should making it a <div>... and then close it). The result in the browser may be unpredictable.
I mentioned in my comment above (sorry, I don't know the name in English), you should avoid crossed tags/nesting of tags. This is incorrect: <label>...<select></label>...</select>, it should be <label>...</label><select>...</select>.
Again, not mandatory but it could be nice to set a value attribute in the <option> tags. If you don't specify a value, the value sent will be the content inside between the <option> tags (that may be what you want in this case).
Don't forget all the code and to close the tags correctly! Things like this: <button type="submit">Save</buttons </div> can have disastrous results (although it looks more of a typo to me).
Don't close tags twice (e.g.: you have </body> twice)
And for the CSS (also with some links for reference):
Avoid unnecessary styling. E.g.: border-radius:0px is unnecessary because 0 is the default value for border-radius (unless you have defined some previous style and you want to overwrite it).
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Specifying units is required for values different than 0. E.g.: margin-left:15 is that 15 in px or em?
http://www.w3.org/TR/CSS21/syndata.html#length-units
The units are optional when the value is 0. Some people find it more readable and better because it is shorter; I personally like them. Your call, but always:
Be consistent: if you omit the units for a zero value, do it in all your definitions. It looks awkward to me to see a padding:0 (without units) next to a margin:0px. It will help you read and maintain the code later.
You could merge many styles together. For example: .zonelist23, .zonelist24, and .zonelist25 are the same, you could define one style only (e.g.: .zonelist_bml30) or set all of them together: .zonelist23, .zonelist24, .zonelist25 { ... }
Not mandatory, but nice: The font-family tag should have several names as a "fallback" system. That way, if the browser does not support the first font, it will go to the next and so on.
http://www.w3schools.com/css/css_font.asp
Just out of curiosity: did you meant to put in the stylesheet .header or is it header? I personally try to avoid classes/ids with the same name as a tag to keep the code easier to understand, but that's a personal choice. As far as I know there's nothing against naming a class like a tag.
One way of having fun and learning (you may now think that I have a strange way of having fun and learning):
Go to the W3C HTML Validator.
Click on the the "validate by direct input" tab.
Copy your code in the box.
Click on the "Validate" button.
View the first error, and read the comments (visit the links for reference).
Fix the code according to what you've read.
Click on the "Revalidate" button.
Repeat steps 5-7 until no errors are found.
(You can do the same with the CSS in the W3C CSS Validator)
Please see this fiddle : http://jsfiddle.net/j6n0w1tj/1/
I have corrected your code.
Kindly follow the steps mentioned by #monty82, who has given an excellent explanation on how to proceed with your code.
Wrong html:
<label>..<select></Label><option></option></select>
Correct html
<label>..</label><select><option></option></select>
Tags like <input>,<br> are self closing tags,close it like <input
type="radio"/> and <br/> not as </br>.
Please make sure whether your opening and closing tags match