airoot uisys 是web前端模块化工具，它可以在不使用虚拟DOM的情况下，方便的实现模块化和数据绑定。其在开发体验上和运行效率上接近原生体验，是一款不错的web开发辅助工具。
那么今天我们来看下uisys（简称）如何用javascript获取html（dom）下的元素，想必你看完就会赞叹不已，如此简单粗暴。

一、具体方式

airoot uisys v1 版本通过js 获取dom下的元素有四种方式，任意其一。

方式1 通过ID获取

例如 dom 里有 id 为 txt 的文本框和 id 为 lb 的 span标签，获取方式如下:
(这种方式要求script里面不能定义与dom元素内相同的变量名，为什么？学过web开发的都了解。)

<div>
	<input id="txt" value="Hello!" />
	<span id="lb">Hello Span!</span>
</div>
<script>
	func init(){
     
     
		alert(txt.value);
		alert(lb.innerHTML);
	}
</script>

方式2 通过#获取

例如 dom 里有 id 为 txt 的文本框和 id 为 lb 的 span标签，获取方式如下:
(这种方式相当于 document.getElementById 方法，所以解释js有同名也没问题。)

<div>
	<input id="txt" value="Hello!" />
	<span id="lb">Hello Span!</span>
</div>
<script>
	func init(){
     
     
		alert(#txt.value);
		alert(#lb.innerHTML);
	}
</script>

方式3 通过document.getElementById获取

例如 dom 里有 id 为 txt 的文本框和 id 为 lb 的 span标签，获取方式如下:
(这种方式比较原生，但是id名前面要加个 $,代表获取模块下的元素ID，如果不加 $ 就代表获取浏览器全局下的ID了，切记。)

<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>

方式4 通过dom关键字获取

dom 在uisys里面是关键字，代表本模块下html的根节点，
意思说，如果html只有一个节点，那么dom关键字指向这个节点，例子如下：

<div>
	Hello AIroot UISYS ~
</div>
<script>
	func init(){
     
     
		alert(dom.innerHTML);
	}
</script>

二、更复杂的获取

我们可以用 dom 关键字执行更复杂的查询，例如下面代码：

<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>

三、总结

整体获取方式如上，所示 uisys 获取方式和原生的javascript获取方式基本是一样的。其实也容易理解，uisys就是web中的Docker吗，其代码只是做了隔离，因此最终是建立的bom底层的，因此获取方法也是和原生一样的。
由于uisys建立在bom底层api上，所以相比虚拟DOM框架运行速度更快，资源占用更好。

想了解更多，可以关注我哦，我会定期更新

uisys 如何用 js 获取 html的元素