link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

mui初级入门教程（四）— 再谈webview，从小白变“大神”！

写在前面

前段时间群里某网友的问题，弹出菜单被子页面挡住了这个老生常谈的问题，其实只要明白 webview 常见的层级问题，这个问题很容易解释，那么解决方案自然很容易想到，如果没有理解错， html5+ 里面 webview 的创建规则是后来居上原则，所以如果想解决那个问题，有两种解决办法：

将弹出菜单放在子页面里面，然后父子页面之间传值，这种方法实用于单个子页面的情况，对于多页面可能并不方便。
第二个方法是将弹出菜单放在一个 webview 里面，设置为透明背景，这样就可以在保证在最上面同时可以盖住底部的内容，在 android 上创建菜单 webview 的时候设置 background 为 "transparent" 可以实现，但是 html5+ webview .WebviewStyles 中说 iOS 平台不支持“transparent”背景透明样式，默认背景使用白色背景 。由于没有用苹果测试过，我真的信了，昨天在群里有人再次问这个问题时，我以为苹果不支持所以说这种方法存在兼容性，然而有人说可以，囧。。。被人呵呵了，实话说有点小受伤，不过也是因为自己没有测就下了结论，这样确实也不好。

可是这个问题还是会有人去问，所以想想也没什么，就把 webview 的其他内容再补充一下，这篇文章不会再贴文档，纯粹做实验，我们重新认识一下 5+ 中的 webview ，如果对于文章中提到的一些方法不熟悉的可以看看 html5+ webview 文档。

WebviewObject 对象详解

今天我们先来重新认识一下 webview ,实践是检验真理的唯一标准，我们通过做实验来试试，其中 WebviewObject 对象是很特别的一个对象，我相信对于这个对象的理解，可以帮助我们理解 webview 的一些细节，我们就详细看看这个对象。

id 属性

首先谈谈 WebviewObject 对象的 id 属性，相信大家一定熟悉 id 选择器， id 选择器是最常用的选择器之一，我们通过 document.getElementById(id) 就可以可返回对拥有指定 ID 的第一个对象的引用，做过 android 开发的一定知道 findViewById 通过这个方法可以得到控件对象的引用，相信 5+ 中的 plus.webview.getWebviewById(id) 应该是将原生中的方法进行了封装以便于使用 JavaScript 调用。在打开或创建 Webview 窗口时设置，如果没有设置窗口标识，此属性值为当前应用的 APPID，字符串类型。注意，如果是在 HBuilder 真机运行获取的是固定值“HBuilder”，需要提交 App 云端打包后运行才能获取真实的 APPID 值。

获取当前窗口 id：

var ws = plus.webview.currentWebview();
console.log("窗口标识: " + ws.id);

我们首先由 id 这个概念才能更加灵活管理 webview ，比如通过 id 获取对象关闭窗口:

var ws = plus.webview.getWebviewById(id);
plus.webview.close(ws);

等效于：

plus.webview.getWebviewById(id).close();

其他的方法类似，具体的可以参考文档 → 5+ webview

窗口层叠关系

我们应该注意到每创建一个 webview 相当于在当前屏幕创建多个重叠的页面层，所以这里的层叠关系是怎么样的呢？我们不妨做一个实验：

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
</head>
	<script type="text/javascript" charset="utf-8">
      	// H5 plus事件处理
		function plusReady(){
			var ws1=null,ws2=null,ws3=null;
			// 获取当前所有Webview窗口
			var ws1=plus.webview.currentWebview();
			console.log("webview"+plus.webview.all().length+":"+ws1.id);
			setTimeout(function(){
				ws2=plus.webview.create("http://weibo.com/dhnetwork");
				ws2.show();
				console.log("webview"+plus.webview.all().length+":"+ws2.id);
			},100);
			setTimeout(function(){
				ws3=plus.webview.create("http://zhaomenghuan.github.io/");
				ws3.show();
				console.log("webview"+plus.webview.all().length+":"+ws3.id)




    
;
			},3000);
			setTimeout(function(){
				ws3.close();
				console.log("剩余窗口数量："+plus.webview.all().length)
			},6000);
			setTimeout(function(){
				ws2.close();
				console.log("剩余窗口数量："+plus.webview.all().length)
			},9000);
		if(window.plus){
			plusReady();
		}else{
			document.addEventListener("plusready",plusReady,false);
    </script>
</body>
</html>

在控制台会打印这个：

 webview1:HBuilder at index.html:16
 webview2:http://weibo.com/dhnetwork at index.html:21
 webview3:http://zhaomenghuan.github.io/ at index.html:27
 剩余窗口数量：2 at index.html:32
 剩余窗口数量：1 at index.html:37

其实执行完这个大家就明显可以看出点结论，在层级关系上你可以认为 webview 是 后来居上原则 ，我们可以通过控制 webview 创建销毁、显示隐藏实现页面切换。我们创建的多个 webview 其实是在原生 android 中的一个 activity 上， webview 之间的页面切换有别于原生 android 中的 activity 间的跳转。很多人没有搞清楚 webview 这个 后来居上原则 就会乱用一些方法也会有一些搞不清楚的问题：比如：

如果父 webview 上的弹出菜单被子 webview 挡住了怎么解决？
把 mui 中的 openWindow()当成 href`跳转使用，造成多次重复创建页面出现闪屏。
如何实现按下返回键不会退到上一个页面（常用于注册登录这一个场景的）

。。。

这里我无法一一列举，但是可以说说通用的一些东西，当我们对于 html5+ webview 的基本方法很熟悉了,我们可以再看看 mui 中的 back() 和 openWindow() 方法的实现思路，自然对于这些问题就会理解了。

那我们现在再做一个系列实验，刚刚我们是通过一层层的注销对象，而且是用的网络地址，现在我们在本地创建两个页面。

我们新建一个项目，创建一个 index.html 文件：

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
</head>
	<script type="text/javascript" charset="utf-8">
      	// H5 plus事件处理
		function plusReady(){
			var ws = plus.webview.create("ws1.html");
			ws.show();
		if(window.plus){
			plusReady();
		}else{
			document.addEventListener("plusready",plusReady,false);
    </script>
</body>
</html>

再新建 ws1.html 文件：

<!DOCTYPE html>
	<meta charset="UTF-8">
	<title></title>
</head>
	这是第二个webview
	<script type="text/javascript">
		// H5 plus事件处理
		function plusReady(){
			setTimeout(function(){
				var ws = plus.webview.create("ws2.html");
				ws.show();
			},3000)
		if(window.plus){
			plusReady();
		}else{
			document.addEventListener("plusready",plusReady,false);
	</script>
</body>
</html>

再新建 ws2.html 文件：

<!DOCTYPE html>
	<meta charset="UTF-8">
	<title></title>
</head>
	这是第三个webview
	<script type="text/javascript">
		function plusReady(){
			plus.webview.getWebviewById("ws1.html").close();
			// 获取所有Webview窗口
			var wvs=plus.webview.




    
all();
			for(var i=0;i<wvs.length;i++){
				console.log("webview"+i+": "+wvs[i].id);
			for(var i=0;i<wvs.length;i++){
				console.log("webview"+i+": "+wvs[i].opener());
		if(window.plus){
			plusReady();
		}else{
			document.addEventListener("plusready",plusReady,false);
	</script>
</body>
</html>

结果：

webview0: HBuilder at ws2.html:16
webview1: ws2.html at ws2.html:16
webview0: undefined at ws2.html:19
webview1: null at ws2.html:19

我们在第三个 webview 里面通过 id 把第二个 webview 正常关闭了，这说明我们的 webview 是可以控制的，通过 plus.webview.all() 方法可以获取当前所有的 webview 对象，发现被关闭的 webview 被销毁了。

这里我们需要说明的是被我们关闭的 webview ，我们无法通过 opener() 获取当前 Webview 窗口的创建者，返回值为 null ，这有别于 undefined 。

有个问题我们一直都没有去探索，就是这些 webview 对象之间有没有什么关系呢？我们在第二篇说到了父子 webview ，那么这里的几个 webview 之间是不是父子结构呢，我们不妨试试看，我们通过 WebviewObject 的 parent() 获取父窗口，这里我们把 ws2.html 中修改如下：

for (var i = 0; i < wvs.length; i++) {
  console.log("webview" + i + ": " + wvs[i].parent());

结果如下：

webview0: undefined at ws2.html:16
webview1: undefined at ws2.html:16

这说明我们创建的这几个对象是平行关系，不存在父子关系，文档中提到： Webview 窗口作为子窗口添加（Webview.append）到其它 Webview 窗口中时有效，这时其它 Webview 窗口为父窗口。

那我们将第三个 webview 填充到第二个 webview 中试试，我们将 ws1.html 修改如下：

function plusReady() {
  var ws = plus.webview.create("ws2.html", "", { top: "46px", bottom: "0px" });
  plus.webview.currentWebview().append(ws);

ws2.html 修改如下：

function plusReady() {
  // 获取所有Webview窗口
  var wvs = plus.webview.all();
  for (var i = 0; i < wvs.length; i++) {
    console.log("webview" + i + ": " + wvs[i].parent());

输入如下：

webview0: undefined at ws2.html:16
webview1: undefined at ws2.html:16
webview2: [object Object] at ws2.html:16

很明显我们发现第三个 webview 具有父对象，这里也说明了父子对象的应用场景，将另一个 Webview 窗口作为子窗口添加到当前 Webview 窗口中，添加后其所有权归父 Webview 窗口，父窗口显示时子窗口会自动显示，父窗口隐藏时子窗口自动隐藏，当父窗口关闭时子窗口也自动关闭。

我们不妨在子 webview 关闭父 webview 试试，结果发现子 webview 也被关闭了，如果不对子 webview 进行 close() 方法操作，可知子 webview 的生命周期是由父 webview 决定的。我们可以通过对子 webview 进行 show() 、 hide() 操作，甚至可以使用 remove 移除子 Webview 窗口，从而实现动态子 webview 。这种场景最常用的是 webview 选项卡。

页面历史记录操作

很多人有将 wap 站点打包成 APP 需求，官方也提供了一些教程，只是很多人没有搞清楚思路，没有明白改造的基本方法，其中有个最常见的问题是如何通过返回键控制网页内容的回退，论坛上有些回答说通过 setJsFile 引入 mui.js ，然后重写 mui.back() ，其实这个回答本来没有错，但是这个答案依然会有很多细节问题，说直接就是 mui.back() 怎么去重写的问题，在搞懂这些问题之前我们不妨看看我们 html5+ 有什么解决办法，由于 mui 并没有给出前端路由的相关解决方法，使用前端技术写 app ，总觉得在页面管理上会有点混乱，前几天一直在构思基于 html5+ 和 mui 的前端路由解决方案。感觉这个问题如果深入探究需要另开篇再谈，这里先给出一个最简单的将一个网址打包成 app 的方案，这个在应用商店估计是通不过的，只是一个基本思路，大家需要的可以拿去看看。

可以通过 plus.key.addEventListener 来注册监听返回按键 backbutton 事件：

plus.key.addEventListener("backbutton", function() {
  alert("BackButton Key pressed!");
});

通过 WebviewObject 对象的 canBack 和 canForward 方法可以查询 Webview 窗口的状态，通过 back 和 forward 控制页面加载。

canBack : 查询 Webview 窗口是否可后退
canForward : 查询 Webview 窗口是否可前进
back : 后退到上次加载的页面
forward : 前进到上次加载的页面
clear 清除原生窗口的内容，用于重置原生窗口加载的内容，清除其加载的历史记录等内容

<!




    
DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
</head>
	<script type="text/javascript" charset="utf-8">
		var ws=null,nw=null;
		function plusReady(){
			ws=plus.webview.currentWebview();
			nw=plus.webview.create("http://weibo.com/dhnetwork");
			ws.append(nw);
			plus.key.addEventListener("backbutton",function(){
				//查询Webview窗口是否可后退
				nw.canBack( function(e){
					var canback=e.canBack;
    				if(canback){
    					nw.back();
    				}else{
    					back();
				});
			});
		var first = null;
        var back = function() {
            if (!first) {
                first = (new Date()).getTime();
                plus.nativeUI.toast('再按一次退出应用');
                setTimeout(function() {
                    first = null;
                }, 1000);
            } else {
                if ((new Date()).getTime() - first < 1000) {
                    plus.runtime.quit();
		if(window.plus){
			plusReady();
		}else{
			document.addEventListener("plusready",plusReady,false);
    </script>
</body>
</html>

如果是使用 mui,我们可以这样写：

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
</head>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
      	mui.init();
      	var ws=null,nw=null;
      	mui.plusReady(function () {
      	    ws=plus.webview.currentWebview();
            nw=plus.webview.create("https://www.baidu.com/");
            ws.append(nw);
      	});
      	var _back = mui.back;
      	mui.back = function(){
      		//查询Webview窗口是否可后退
            nw.canBack( function(e){
                var canback=e.canBack;
                if(canback){
                    nw.back();
                }else{
                    _back();
            });
    </script>
</body>
</html>

当然 WebviewObject 对象的内容不止这些，这里我只列举了其中大家容易出问题的一些内容，详细的讲解再后面的其他模块的讲解中会再做补充，大家也可以自己学习。

WebviewStyles 对象举例

WebviewStyles 是 JSON 对象，原生窗口设置参数的对象，设置方法有两种：

在 plus.webview.create() 或者 plus.webview.open() 中作为参数设置，如：

plus.webview.create(url, id, {
  top: "0px",
  bottom: "0px",
  mask: "rgba(0,0,0,0.5)"
});

使用 setStyle() 动态设置，如：

var ws = plus.webview.currentWebview();
// 显示遮罩层
ws.setStyle({ mask: "rgba(0,0,0,0.5)" });

WebviewStyles 常用属性

zindex: (Number 类型 )窗口的堆叠顺序值 拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的上面，拥有相同堆叠顺序的窗口后调用 show 方法则在前面。

设置方法如：

{
	zindex: 999

前面我们讲到了 webview 的层叠关系是 后来居上原则 ，有一个前提是默认层级，没有使用 zindex 改变默认的层级关系值，大家知道在 web 中我们使用 z-index 可以改变控件的层叠关系，说直观点就好是可以定义有重叠的两个部分，谁在上面谁在下面的问题。

那么在必要的时候我们可以使用这个 WebviewStyles 的 zindex 属性去改变层叠关系。

如上图这种情况，我们的底部菜单中间有个突出的部分，如果直接用我们之前将到的那个方法，我们知道要么是那个突起的一小块被挡住了，要么是中间的内容与底部非得保持一定的距离，这就尴尬了，而且目前官方的 demo 没有给这种特殊的需求，那么是不是不能自己做呢？

肯定不是的，不然 html5plus 也不至于要做为一个标准去提，肯定是有通用方法解决不同的个性化需求的。

我们很好想到的就是在上次的基础上进行改进就可以满足这个需求：我们首先思考一个问题，我们是将父 webview 的堆叠顺序改成比子页高还是说将 tabbar 作为一个层独立出来呢？

首先我们思考一下简单粗暴的提高父 webview 会怎么样？首先我们会发现子 webview 会被父 webview 盖住，有人可能会说把父 webview 搞成透明的，OK，那么问题来了怎么设置透明呢？

background: (String 类型 )窗口的背景颜色 窗口空白区域的背景模式，设置 background 为颜色值(参考 CSS Color Names，可取值/十六进制值/rgb 值/rgba 值)，窗口为独占模式显示（占整个屏幕区域）；设置 background 为“transparent”，则表示窗口背景透明，为非独占模式。

设置方法如：

{
	background: 'transparent'

这个就是我开篇说到的那个问题，当时犯了错误，误以为 ios 不支持，后来得到果汁的确认后来支持了，文档没有更新而已。

虽然我们可以通过设置父 webview 透明不至于看不到子页面，但是有个更严重的问题就是子 webview 被盖住了我们不能操作，这是多么的坑，所以这个方法走不通。我们想一下把 tabbar 抽离出来作为一个子 webview ,只要设置 tabbar 的范围，也就是说不全屏幕铺开，设置高度属性限制高度，设置 bottom 将 tabbar 固定在底部，然后设置 tabbar 的 zindex 属性比其他子 webview 高就 ok 了。

// 子页参数
var Index = 0;
var subpages = [
  "html/home.html",
  "html/message.html",
  "html/find.html",
  "html/setting.html"
var subpage_style = {
  top: "45px",
  bottom: "50px",
  zindex: 99
// 底部导航栏
var tabbar = "html/tabbar.html";
var tabbar_style = {
  height: "60px",
  bottom: "0px",
  background: "transparent",
  zindex: 999

我们只需要给 tabbar 设置 background 和 zindex 就可以实现上面那个图那种效果，但是也因此带了一个问题就是，我们之前点击底部栏直接就可以获取相关的参数进行切换，但是我们现在把 tabbar 单独拿出来了，那么久涉及一个父子 webview 通信的问题，我们前面一篇文章讲到页面初始化时候通过扩展参数 extras 传值，这里我们需要用到 自定义事件 ，通过自定义事件，用户可以轻松实现多 webview 间数据传递。

我们这里先贴出 tabbar 的局部代码便于讲解，大家可以在【mui demo】仓库下载完整代码，或者在这里 c 查看【预览效果】。

在此感谢群友们提出 demo 中的 bug，就是在苹果手机中切换 tabbar，tabbar 依然会被挡住的问题，开篇讲到由于本人没有苹果手机，所以 demo 难免在苹果手机上有一些小问题，但是问题还是可以解决的，其实看了文章多思考一下自己没啥问题的，不建议新手直接一上来来 demo，不然出现小问题自己都不知道什么原因，那么这篇文章也没啥意义。再来说说群友提的问题，我觉得有两种可能性，没有用苹果做实验测试，只是猜想：1.zindex 在 ios 无效；2.优先级的问题，可能是选项卡切换过程执行 show 方法，我们前面说到后来居上原则，这个时候 zindx 的层级关系优先级低于后来居上原则。大家可以去实验验证，这里无法给出肯定答案。不过解决思路，我觉得可以试试两种：1.在子页面 show 后马上用 setStyle 设置 zindex；2.直接在子页面 show 后重新执行 tabbar show 方法。

tabbar.html html 部分：

<nav class="mui-bar mui-bar-tab mui-botton-bar">
	<a class="mui-tab-item mui-active" href="html/home.html">
		<img class="mui-icon" src="../img/i-home-active.png"/>
		<span class="mui-tab-label">首页</span>
	<a class="mui-tab-item" href="html/message.html">
		<img class="mui-icon" src="../img/i-star.png"/>
		<span class="mui-tab-label">消息</span>
	<a class="mui-tabbar-center" href="popover.html">
		<img src="../img/i-pop-active.png"/>
	<a class="mui-tab-item" href="html/find.html">
		<img  class="mui-icon" src="../img/i-find.png"/>
		<span class="mui-tab-label">发现</span>
	<a class="mui-tab-item" href="html/setting.html">
		<img class="mui-icon" src="../img/i-person.png"/>
		<span class="mui-tab-label">个人</span>
</




    
nav>

js 部分：

//选项卡点击事件
mui(".mui-bar-tab").on("tap", "a", function(e) {
  // 获取当前点击的选项
  var targetTab = this.getAttribute("href");
  // 如果点击中间的菜单栏弹出菜单
  if (targetTab == popTab) {
    // 创建mask遮罩
    plus.webview
      .create("", "mask", {
        mask: "rgba(0,0,0,0.4)",
        background: "transparent"
      .show();
    // 打开弹出层
    plus.webview.show(popWebview, "slide-in-bottom", 300);
    return;
  //当前选项值传到父webview
  var currWs = plus.webview.currentWebview();
  var targetTitle = this.querySelector(".mui-tab-label").innerHTML;
  //触发详情页面的newsId事件
  mui.fire(currWs.parent(), "targetTab", {
    targetTitle: targetTitle,
    targetTab: targetTab
  });
   * 下面这部分非每个项目必须的，因为这里为了给
   * 大家演示怎么用图片作为图标而不用字体图标。
  // 获取图标对象
  var targetIcon = mui(this.children[0])[0];
  //初始化
  mui(".mui-bar-tab .mui-tab-item img").each(function(index, item) {
    var itemSrc = item.getAttribute("src");
    if (itemSrc.indexOf("active")) {
      item.src = itemSrc.replace("-active.png", ".png");
  });
  //设置当前的图标
  targetIcon.src = targetIcon
    .getAttribute("src")
    .replace(".png", "-active.png");
});

这里我们使用了图片而不是图标，因为考虑有些项目可能设计比较个性化，我们不一定可以在 Iconfont-阿里巴巴矢量图标库上找到合适的图，有时候用字体文件有局限性，所以这个例子里面我们使用了图片演示。

这个地方需要对几个细节特别说说：

mui.fire()触发自定义事件

按照文档的说明我们知道有三个参数：（不知道文档在哪里的请戳这里【文档】）

mui.fire( target , event , data )

target 为你要传入数据的那个 webview ，我们这里是要出入到父 webview ，由于我们没有给父 webview 指定 id ，我们前面知道这样就不方便拿到父 webview 对象，这里就使用当前 webview 的 parent() 间接获取。 event 是你可以指定的自定义事件名称。 data 是你要传入的数据，为 json 格式 (不知道 json 为何物的同学请戳我上一篇文章 mui 初级入门教程（三）— html5+ XMLHttpRequest 与 mui ajax 用法详解 ) 。

我们获取数据也很简单：

// 添加targetTab自定义事件监听
window.addEventListener("targetTab", function(event) {
  // 获得选项卡点击事件参数
  var targetTitle = event.detail.targetTitle;
  var targetTab = event.detail.targetTab;
  //接下来这里拿到数据后写逻辑代码了...
});

不过这里有一个特别需要注意的问题，由于我还没有遇到，但是看官网文档有说明，贴出来方便后来遇到这个问题的同学：

目标 webview 必须触发 loaded 事件后才能使用自定义事件 若新创建一个 webview，不等该 webview 的 loaded 事件发生，就立即使用 webview.evalJS()或 mui.fire(webview,'eventName',{})，则可能无效；案例参考：这里

mui 对象和 DOM 对象的区别

之所以说说这个是因为在写那个用图片代码字体图标的时候出现一个问题就是选中当前选项，选项卡图片要换成对应激活状态的图片。那么问题来了，怎么拿到 a 标签下的 img 标签对象,如果用过 jQuery ,我们知道直接用下面的代码就可以实现：

$(".mui-bar-tab a")
  .children("img")
  .css("src", "xxx-active.png");

然而 mui 本着极简的原则没有 children 和 css 方法，那么我们只考虑用原生 js 操作 DOM 。这里推荐大家用 mui 和原生 js 实现，毕竟就那么一点代码引入一个库不值得，也不利于提高自身的水平。那么我们这里就补一下基础知识，考虑到每个人基础不同，这里尽可能精简的说一下。

HTML DOM 基础

什么是 DOM? DOM ，全称 Document Object Model（文档对象模型），是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

什么是 HTML DOM？ HTML DOM 是 HTML 的标准对象模型和标准编程接口，W3C 标准。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 节点树 HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：节点父、子和同胞：节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

HTML DOM 属性 属性是节点（HTML 元素）的值，您能够获取或设置。可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

1.innerHTML 属性：获取元素内容的最简单方法是使用 innerHTML 属性。 innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

2.nodeName 属性：nodeName 属性规定节点的名称，是只读的，nodeName 始终包含 HTML 元素的大写字母标签名。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

3.nodeValue 属性：nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

4.nodeType 属性：nodeType 属性返回节点的类型，是只读的。比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

5.childNodes 属性与 children 属性 childNodes 属性返回包含被选节点的子节点的 NodeList。如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。childNodes 包含的不仅仅只有 html 节点，所有属性，文本、注释等节点都包含在 childNodes 里面。children 只返回元素如 input, span, script, div 等，不会返回 TextNode，注释。

HTML DOM 方法 通常使用的最多的就是 Document 和 window 对象。简单的说, window 对象表示浏览器中的内容，而 document 对象是文档本身的根节点。Element 继承了通用的 Node 接口, 将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时，这些元素可能会有专用的接口。下面是在 web 和 XML 页面脚本中使用 DOM 时，一些常用的方法:

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

具体更详细的大家可以参考这篇文章 JavaScript DOM——“节点层次”的注意要点

mui 对象和 dom 对象的具体区别

我们上面讲了一下 DOM 对象的基本属性和方法，限于篇幅，只是简单说了说，如果说连上面的都不知道的就需要查一下咯，当然 DOM 历史悠久，肯定不止这么多内容，对于新手来说熟悉常用的 DOM 是很有必要的，我自己在这方面目前就做得不够好，后期还会继续深入学习。

首先我们得说 mui 对象和 dom 对象都我们是两个对象，都有自己的独有的属性和方法，如果一个对象调用了一个自己没有另外一个对象有的属性和方法，肯定会报错的。这里我们先举个小例子：

<!DOCTYPE html>
		<meta charset="UTF-8">
		<title></title>
	</head>
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<button type="button" id="btn">按钮</button>
		<script type="text/javascript">
			// dom对象实现
			var btn = document.getElementById("btn");
			btn.addEventListener('click',function(){
				console.log("用dom对象获取button元素点击了按钮")
			});
			// mui对象实现
			mui("#btn")[0].addEventListener('click',function(){
				console.log("用mui对象获取button元素点击了按钮")
			});
			//判断这两个方法是否等同
			console.log(document.getElementById("btn")===mui("#btn")[0])
		</script>
	</body>
</html>

经常容易犯错的一个就是下面的使用方法：

mui("#btn").addEventListener("click", function() {
  console.log("用mui对象获取button元素点击了按钮");
});

我们通过 mui("#btn") 获取的是一个 mui 对象实例，然而 mui 对象没有 addEventListener ，就会报错，我们用 jQuery 也会出现这种问题，然而 jQuery 中 on 方法很常用，不会想那么多，但是 mui 中的 on 方法实现批量元素的事件绑定，非得传入第二个参数，和我们的需求有时候不相符合， mui 推荐我们直接使用 addEventListener 方法，然而这个是 dom 对象的方法，我们又不想用 document.getElementById("btn") 这种一长串的方法怎么办呢？我们可以考虑将 mui 对象转成 dom 对象，方法是： mui 对象 mui("#btn") 转成 dom 对象为 mui("#btn")[0]，我们后面也会陆续讲到怎么自己封装一些常用的 dom 对象操作方法。

我们接下来说说 mui 对象中的 on() 中的 this 指向和父子节点问题：

mui(".mui-bar-tab").on("tap", "a", function(e) {
  console.log(this.innerHTML);
});

我们这里执行这个会发现这里的 this 指向的是当前点击的 a 标签。

我们如果想获取子节点，我们前面提到了有两个方法： childNodes 和 children ,我们可以用下面的方面遍历：

mui(".mui-bar-tab").on("tap", "a", function(e) {
  for (var i = 0; i < this.childNodes.length; i++) {
    console.log("childNodes:" + this.childNodes[i]);
  for (var i = 0; i < this.children.length; i++) {
    console.log("children:" + this.children[i]);
});

结果：

childNodes:[object Text] at html/tabbar.html:85
childNodes:[object HTMLImageElement] at html/tabbar.html:85
childNodes:[object Text] at html/tabbar.html:85
childNodes:[object HTMLSpanElement] at html/tabbar.html:85
childNodes:[object Text] at html/tabbar.html:85
children:[object HTMLImageElement] at html/tabbar.html:89
children:[object HTMLSpanElement] at html/tabbar.html:89

我们会发现使用 childNodes 会有[object Text]，我们这里的其实是因为我们上面的 HTML 结构中有回车和空格的原因，去掉后会发现和 children 结果一致。

注：Internet Explorer 下使用 childNodes 会忽略节点之间生成的空白文本节点（比如换行字符）。

为了简单我们通常使用 children ，比如上面的例子我们用到了

var targetIcon = mui(this.children[0])[0];

这样我们就拿到了 HTMLImageElement 对象，我们通过 getAttribute('src') 方法就可以拿到 src 属性。

其实写到这里我们发现只要掌握了原生 js 操作 DOM 的方法，我们其实可以不过度依赖 jQuery 这种库，当然 jQuery 也不仅仅只是这么多内容，很多封装的思路值得我们去学习，小白学习前端的路很长，但是一定要脚踏实地去落实，不要急于求成。

项目实战之父子页面弹出层

这一篇文章本来上次就应该完成的，但是一直拖了很久，一来是因为时间久了，这么问题感觉也不想继续写，毕竟写文章要花时间，但是又有强迫症，想想还是完善一下，详不详细都不要紧，但是要把主要的内容写出来就可以。

先看效果图：

就是前面我们点击中间那个选项弹出的一个菜单，很显然这个问题具有一定的代表性。做过类似需求的朋友肯定知道问题所在，我们把弹出菜单如果放在父 webview ，那么在这种情况下会被子 webview 盖住，当然我们可以考虑在点击弹出层时候动态设置父页面的层级比子页面高，然后关闭再设置恢复，但是这个过程很麻烦，不是最佳实战方法，在子 webview 的话，那么设计父子 webview 通信的问题，对于这种多子 webview 页面的情况是不是过于麻烦呢，这种时候我们用新建一个 webview 装弹出层我觉得是一种最合适的方案。

知道思路了，方案实施很简单的，其实就是当我们点击那个弹出层的时候，然后显示 webview ，当关闭的时候隐藏或者关闭 webview 。打开时候的关键代码如下：

//弹出菜单
var menuWebview;
var menuTab = "menu.html";
mui.plusReady(function() {
  //预加载弹出菜单子页面
  menuWebview = mui.preload({
    url: menuTab,
    id: menuTab,
    styles: {
      top: "0px",
      bottom: "0px",
      background: "transparent"
  });
});
//...此处略去若干代码
// 如果点击中间的菜单栏弹出菜单
if (targetTab == menuTab) {
  if (window.plus) {
    // 创建mask遮罩
    plus.webview
      .create("", "mask", {
        mask: "rgba(0,0,0,0.4)",
        background: "transparent"
      .show();
    // 打开弹出层
    plus.webview.show(menuWebview, "slide-in-bottom", 300);
  } else {
    mui.alert("请在html5+引擎环境使用");
  return;

我们这里做了一些特别的处理，我们设置弹出层 webview 中的 background: 'transparent' ，以及弹出层页面的 body{background: transparent;} 是为了得到一个透明的弹出层，如果不需要可以忽略，同时可以可以通过设置 top 和 bottom 设置弹出层的范围，这些具体配置参数在上面的内容中都有讲解，具体的大家可以详细看看。另外考虑到有人需要遮罩这种布局，我们专门新建了一个 webview 创建 mask 遮罩，具体的参数类似。

至于关闭弹出层也很简单，我们在弹出层的页面重写 mui.back() 方法。

/*
 * 这里重写mui.back()方法，在需要执行关闭命令的地方
 * 加上 mui-action-back 类，可以绑定back()方法。
mui.back = function() {
  // 隐藏弹出层
  plus.webview.currentWebview().hide();
  // 关闭遮罩