Is it possible to check that the <head> contains a specific <link> tag?
For example I would add a link to the head:
let link = document.createElement('link');
link.href = 'https://my.path.css';
link.type = 'text/css';
link.rel = 'stylesheet';
document.head.append(link);
Is it then possible to check that it is present within the head?
I know that I can get an HTMLCollection with
const headChildren = document.getElementsByTagName('head')[0].children;
But I can't seem to navigate this to check...
The reason you can't "navigate" headChildren is because it's an 'iterable' but not officially an array.
Use Array.from to convert it then you can treat it like a normal array.
let actualArray = Array.from(headChildren)
You can also iterate over 'iterables' with a for of loop:
for (let child of headChildren) {
console.log(child)
}
I would use querySelectorAll and not children. I would convert the HTML collection to an array and use some to loop over the collection to find a match with the href.
const exist = Array.from(
document.querySelectorAll('link[rel="stylesheet"]')
).some(link => link.href === 'https://my.path.css')
The suggestions for the loop were only half of the solution I required.
I wanted a simple way to check that the exact tag that I had created and pushed into the was present.
I attempted all the different types of equality to no avail. '==' and '===' wouldn't work I'm assuming because of referring to object identities etc like Strings suffer from.
I found the solution with `.isEqualNode' which equates two nodes.
Therefore my solution in the end was:
const headChildren = document.getElementsByTagName('head')[0].children;
for (let child or headChildren) {
if (child.isEqualNode(myLinkNode) {
// Do something
}
}
Related
I'm looping through a table in the form of table.rows.length and inside it rows.cells.length and when a certain cell meets a certain criteria then I would like to set an attribute to that html of that cell.
I know you can change the innerHTMl like
var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
so I thought the attr would be like
x[0].attr = ('name', 'value');
But no such luck.
could someone please point me to the right direction?
If there are any resources you can recommend that give a full list of all the options you can add to a cell this way that would be great!
Since you're operating with HTML nodes directly - you're dealing with HTMLElement objects that are, in their turn, inherited from generic Element.
As you can see from documentation - you can reach attributes through Element.attributes map, each of them are Attr object with name and value properties.
So correct way will be to use:
x[0].setAttribute('name', 'value');
Working with jQuery and es6 syntax you could use the map function:
var xtr = $('#mytable tr');
xtr.map(itr => {
xtd = $(itr).children('td');
xtd.map(itd => {
$(itd).attr('key', 'value');
});
});
If thats confusing you can work with the for loop the old way:
var xtr = $('#mytable tr');
for(i in xtr){
xtd = $(xtr[i]).children('td');
for(j in xtd){
$(xtd[j]).attr('key', 'value');
}
}
Point being when using jQuery what you do is:
$('element').attr('key', 'value');
I have a list of links, and want to click on one of them based on the name of the link. I can't accomplish this with selectors.
It would be nice to use something like page.$eval to get the ElementHandle of that item so I can then tap/click it.
The only other approach I can think of is getting the x/y coords within $eval and then manually clicking on clicking on the location. Seems tedious.
I posted this here per the guidelines, but LMK if we should open a PR on this.
Have you considered use the page.$$(selector) to get all your target elments and then use page.evaluate() to get the linkName, then do the check and click?
something like:
const targetLinks = await page.$$('yourLinkSelector');
for(let link of targetLinks){
const linkName = await page.evaluate(el => el.innerHTML, link);
if (linkName === 'myFancyLinkToClick') {
await link.click();
// break if only 1 link click is needed.
break;
}
}
Hope it works for you.
used jssor slider , i have some pages with same jssor slider , some pages are working fine , but some pages comes Outer container 'null' not found. bug , can any one help on this ?
I had a similar problem, so did some digging to see what the issue was.
The setup starts with the initial call, here's the snippet from the demo site
http://www.jssor.com/development/index.html
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
which, among setting up all kinds of utility functions- more importantly does this
function JssorSlider(elmt, options) {
var _SelfSlider = this;
...
// bunch of other functions
...
$JssorDebug$.$Execute(function () {
var outerContainerElmt = $Jssor$.$GetElement(elmt);
if (!outerContainerElmt)
$JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
});
}
so at this point, it's trying to collect the string you passed, which is the elmt variable- which is for what? Well let's take a look at that $GetElement function in jssor.js
_This.$GetElement = function (elmt) {
if (_This.$IsString(elmt)) {
elmt = document.getElementById(elmt);
}
return elmt;
};
So, really, what it comes down to is this line for finding the element.
elmt = document.getElementById(elmt);
So the base of this error is
"We tried to use your string to find a matching ID tag on the page and it didn't give us a valid value"
This could be a typo, or another line of code modifying/removing the DOM.
Note that there are some scripts try to remove or modify element in your page.
Please right click on your page and click 'Inspect Element' menu item in the context menu.
Check if the 'outer container' is still there in the document. And check if there is another element with the same id.
Check if "Slider1_Container" is present or Used.
In my case, I didn't have it in my html, but still I had added the js.
Removing js resolved my issue.
This w3schools page mentions the HTML DOM createElement() Method. For example, you can create a button by
var btn=document.createElement("BUTTON");
However, how can I add ID/class to this button? And what else can I do with it?
One way with Javascript, is by using setAttribute:
element.setAttribute(name, value);
Example:
var btn=document.createElement("BUTTON");
btn.setAttribute("id", "btn_id");
btn.setAttribute("class", "btn_class");
btn.setAttribute("width", "250px");
btn.setAttribute("data-comma-delimited-array", "one,two,three,four");
btn.setAttribute("anything-random", document.getElementsByTagName("img").length);
The advantage of this way is that you can assign arbitrary values to arbitrary names.
https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute
You could assign to its property:
var btn=document.createElement("BUTTON");
btn.id = 'btn_id';
btn.className = 'btn_class';
This code from Dart worries me:
bool get isTemplate => tagName == 'TEMPLATE' || _isAttributeTemplate;
void _ensureTemplate() {
if (!isTemplate) {
throw new UnsupportedError('$this is not a template.');
}
...
Does this mean that the only way I can modify my document is to make it html5?
What if I want to modify an html4 document and set innerHtml in a div, how do I achieve this?
I am assuming you are asking about the code in dart:html Element?
The method you are referring to is only called by the library itself, and only in methods where isTemplate has to be true, for example this one. If you follow this link, you can also read what other fields/methods work like this.
innerHtml is a field in every subclass of Element which supports it, for example DivElement
Example:
DivElement myDiv1 = new DivElement();
myDiv1.innerHtml = "<p>I am a DIV!</p>";
query("#some_div_id").innerHtml = "<p>Hey, me too!</p>";