Directly Reference HTML Elements

Directly reference HTML elements

Being able to select elements on the page based on their [id] is a "feature" from early JavaScript (DOM lvl 0 or 1 methinks, can't seem to find the source).

Unfortunately it's a temperamental feature. What would happen if you had:

<div id="window"></div>

or

<div id="document"></div>

Better yet, what happens here?

<div id="foo"></div>
<div id="bar"></div>
<script>var foo = document.getElementById('bar');</script>

So the nuances to calling an element based on it's [id] is simply this:

Don't use it.

It's not consistent, and not guaranteed to receive future support.

Personally I'd like to see this "feature" go the way of document.all. It only causes more issues than it solves, and document.getElementById, while certainly verbose, is meaningful and understandable.

Getting an element reference in a Custom Element

How do I find out the button's height before the first render?

You can't because the rendering engine sets the height

There is another potential issue

Any CSS change can re-render your button

The (not so new) ResizeObserver notifies you of those changes

so inside a connectedCallback() you could do:

this.observer = new ResizeObserver(entries=>{
  // check whether you need to (re)set stuff here
});
this.observer.observe(this)

Note (this had me baffled the first 15 minutes) that the element you inject in the page immediatly triggers the ResizeObserver

ResizeObserver has been in Chrome for some years now. All evergreen browsers now support it.

https://developers.google.com/web/updates/2016/10/resizeobserver

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

How to get the html tag HTML with JavaScript / jQuery?

The simplest way to get the html element natively is:

document.documentElement

Here's the reference: https://developer.mozilla.org/en-US/docs/Web/API/Document.documentElement.

UPDATE: To then grab the html element as a string you would do:

document.documentElement.outerHTML

getting a reference to an element in javascript

Your CSS selector string

section.button input[type="file"]

already selects the input you need - all you need to do is pass that selector string to querySelector, and you'll be returned a reference to that <input>:

const input = document.querySelector('section.button input[type="file"]');
input.click();

What that selector string means is: select an input with an attribute type whose value is file, which is a descendant of a section whose class is button. (Just for an example, if you wanted to select the <button> instead of the <input>, you can follow the exact same pattern - just use button instead of input: section.button button)

How to reference an HTML element in php?

This is not a job for PHP, you should use Javascript to capture the table contents and then manipulate them whatever way you would like. If on the other hand the table contents never change then you can just put them into your PHP function.

You can pull the values of the table by first setting an ID for the table like so:

<table id="someTable">
<tr id="someRow">
    <td>Data</td>
    <td>Data2</td>
</tr>
</table>

Then you can call the values from the table using JavaScript:

var row = document.getElementById("someRow");
var cellValues = row.getElementsByTagName("td");

This will put all of the cells into an array. Then you can put them into variables.

var firstCell = cellValues[0].innerText;
var secondCell = cellValues[1].innerText;

Then you can put it into an AJAX Request and send it to your PHP function to be processed.

This will send a GET or POST request to yourfile.php and then you can manipulate the cell rows in whatever manner you would like and send back a result by echoing it out in the PHP file. You can retrieve the results by making the callback function.

Hope this helps,
Chris

get HTML element reference from mxCell

graph.convertValueToString can return HTML markup or DOM elements directly if graph.setHtmlLabels(true) was used. To get a reference to the DOM element for the HTML markup, use graph.view.getState(vertex).text.node. DOM elements returned from convertValueToString are inserted into the DOM directly.

---

Related Topics