airoot uisys is a web front-end modular tool, which can easily implement modularization and data binding without using virtual DOM. It is close to the original experience in terms of development experience and operational efficiency, and is a good web development aid.
So today, let’s take a look at how uisys (abbreviation) uses javascript to get the elements under html (dom). I think you will be amazed after reading it, so simple and rude.
1. The specific method
The airoot uisys v1 version has four ways to get the elements under dom through js, any one of them.
Method 1 Obtain by ID
For example, there is a text box with id txt and a span tag with id lb in dom. The method of obtaining it is as follows:
(This method requires that the same variable name in the script cannot be defined in the dom element. Why? Anyone who has studied web development knows. )
<div>
<input id="txt" value="Hello!" />
<span id="lb">Hello Span!</span>
</div>
<script>
func init(){
alert(txt.value);
alert(lb.innerHTML);
}
</script>
Way 2 Get through #
For example, there is a text box with id txt and a span tag with id lb in dom.
The method of obtaining is as follows: (This method is equivalent to the document.getElementById method, so it is no problem to explain that js has the same name.)
<div>
<input id="txt" value="Hello!" />
<span id="lb">Hello Span!</span>
</div>
<script>
func init(){
alert(#txt.value);
alert(#lb.innerHTML);
}
</script>
Method 3 Get through document.getElementById
For example, there is a text box with id txt and a span tag with id lb in dom. The method of obtaining is as follows:
(This method is more primitive, but the id name must be preceded by a $ , which means to obtain the element ID under the module. If no $ is added It means to get the ID under the browser global, remember.)
<div>
<input id="txt" value="Hello!" />
<span id="lb">Hello Span!</span>
</div>
<script>
func init(){
alert(document.getElementById("$txt").value);
alert(document.getElementById("$lb").innerHTML);
}
</script>
Method 4 Get through the dom keyword
dom is a keyword in uisys, which represents the root node of html under this module,
meaning that if html has only one node, then the dom keyword points to this node. Examples are as follows:
<div>
Hello AIroot UISYS ~
</div>
<script>
func init(){
alert(dom.innerHTML);
}
</script>
Two, more complex acquisition
We can use the dom keyword to perform more complex queries, such as the following code:
<div>
<input id="txt" name="ipt" value="Hello!" />
<span id="lb">Hello Span!</span>
<h1>01</h1>
<h1>02</h1>
<h1>03</h1>
<div class="Menu">
<div class="MenuItem">Menu Item 1</div>
<div class="MenuItem">Menu Item 2</div>
<div class="MenuItem">Menu Item 3</div>
<div class="MenuItem">Menu Item 4</div>
<div class="MenuItem">Menu Item 5</div>
</div>
</div>
<script>
func init(){
console.log(document.getElementById("$txt").value);
console.log(document.getElementById("$lb").innerHTML);
var tags = dom.getElementsByTagName("h1");
for(let k in tags){
console.log(tags[k]);
}
var clss = dom.getElementsByClassName("MenuItem");
for(let k in clss ){
console.log(clss [k]);
}
console.log(dom.getElementsByName("ipt"));
}
</script>
Three, summary
The overall acquisition method is as above, the uisys acquisition method shown is basically the same as the native javascript acquisition method. In fact, it is easy to understand, is uisys the Docker in the web? Its code is only isolated, so it is the bottom layer of the built bom, so the acquisition method is the same as the original one.
Because uisys is built on the underlying api of Bom, it runs faster than the virtual DOM framework and consumes better resources.
If you want to know more, you can follow me, I will update regularly