mui初级入门教程（四）— 再谈webview，从小白变“大神”！
文章来源：小青年原创
发布时间：
关键词：mui，html5+，webview
转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/
写这篇文章之前先吐吐槽，因为是学生，不想用父母辛辛苦苦挣的钱买什么苹果手机，因为确实贵，本人至今用的还是去年买的魅蓝note 1（虽然已经很久了，但是没办法啊，舍不得花钱换。），前段时间项目钱收到了本来想换手机的，但是想了想还是先省一省，过几个月开始实习了再看吧！（哈哈，如果有哪位土豪看到这里愿意给我赞助一个二手苹果手机那也是极其感动的，可以作为技术顾问作为报答。）
之所以说手机这个事，是因为前段时间群里某网友的问题，弹出菜单被子页面挡住了这个老生常谈的问题，其实只要明白webview常见的层级问题，这个问题很容易解释，那么解决方案自然很容易想到，如果没有理解错， html5+ 里面 webview 的创建规则是后来居上原则，所以如果想解决那个问题，有两种解决办法：
将弹出菜单放在子页面里面，然后父子页面之间传值，这种方法实用于单个子页面的情况，对于多页面可能并不方便。
第二个方法是将弹出菜单放在一个 webview 里面，设置为透明背景，这样就可以在保证在最上面同时可以盖住底部的内容，在 android 上创建菜单 webview 的时候设置 background 为 &transparent& 可以实现，但是 html5+ webview .WebviewStyles 中说 iOS平台不支持“transparent”背景透明样式，默认背景使用白色背景 。由于没有用苹果测试过，我真的信了，昨天在群里有人再次问这个问题时，我以为苹果不支持所以说这种方法存在兼容性，然而有人说可以，囧。。。被人呵呵了，实话说有点小受伤，不过也是因为自己没有测就下了结论，这样确实也不好。
可是这个问题还是会有人去问，所以想想也没什么，就把 webview 的其他内容再补充一下，这篇文章不会再贴文档，纯粹做实验，我们重新认识一下 5+ 中的 webview ，如果对于文章中提到的一些方法不熟悉的可以看看 html5+ webview 文档 。
WebviewObject 对象详解
今天我们先来重新认识一下 webview ,实践是检验真理的唯一标准，我们通过做实验来试试，其中 WebviewObject 对象是很特别的一个对象，我相信对于这个对象的理解，可以帮助我们理解 webview 的一些细节，我们就详细看看这个对象。
首先谈谈 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&&html&&head&
&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&&body&
&script type=&text/javascript& charset=&utf-8&&
// H5 plus事件处理
function plusReady(){
var ws1=null,ws2=null,ws3=
// 获取当前所有Webview窗口
var ws1=plus.webview.currentWebview();
console.log(&webview&+plus.webview.all().length+&:&+ws1.id);
setTimeout(function(){
ws2=plus.webview.create(&/dhnetwork&);
ws2.show();
console.log(&webview&+plus.webview.all().length+&:&+ws2.id);
setTimeout(function(){
ws3=plus.webview.create(&http://zhaomenghuan.github.io/&);
ws3.show();
console.log(&webview&+plus.webview.all().length+&:&+ws3.id);
setTimeout(function(){
ws3.close();
console.log(&剩余窗口数量：&+plus.webview.all().length)
setTimeout(function(){
ws2.close();
console.log(&剩余窗口数量：&+plus.webview.all().length)
if(window.plus){
plusReady();
document.addEventListener(&plusready&,plusReady,false);
&/script&&/body&&/html&
在控制台会打印这个：
webview1:HBuilder at index.html:16 webview2:/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&&html&&head&
&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&&body&
&script type=&text/javascript& charset=&utf-8&&
// H5 plus事件处理
function plusReady(){
var ws = plus.webview.create(&ws1.html&);
ws.show();
if(window.plus){
plusReady();
document.addEventListener(&plusready&,plusReady,false);
&/script&&/body&&/html&
再新建 ws1.html 文件：
&!DOCTYPE html&&html&&head&
&meta charset=&UTF-8&&
&title&&/title&&/head&&body&
这是第二个webview
&script type=&text/javascript&&
// H5 plus事件处理
function plusReady(){
setTimeout(function(){
var ws = plus.webview.create(&ws2.html&);
ws.show();
if(window.plus){
plusReady();
document.addEventListener(&plusready&,plusReady,false);
&/script&&/body&&/html&
再新建 ws2.html 文件：
&!DOCTYPE html&&html&&head&
&meta charset=&UTF-8&&
&title&&/title&&/head&&body&
这是第三个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.i++){
console.log(&webview&+i+&: &+wvs[i].id);
for(var i=0;i&wvs.i++){
console.log(&webview&+i+&: &+wvs[i].opener());
if(window.plus){
plusReady();
document.addEventListener(&plusready&,plusReady,false);
&/script&&/body&&/html&
webview0: HBuilder at ws2.html:16webview1: ws2.html at ws2.html:16webview0: undefined at ws2.html:19webview1: 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.i++){
console.log(&webview&+i+&: &+wvs[i].parent());}
结果如下：
webview0: undefined at ws2.html:16webview1: 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.i++){
console.log(&webview&+i+&: &+wvs[i].parent());
输入如下：
webview0: undefined at ws2.html:16webview1: undefined at ws2.html:16webview2: [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&&html&&head&
&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&&body&
&script type=&text/javascript& charset=&utf-8&&
var ws=null,nw=null,canback=null,canforward=null,i=0;
function plusReady(){
ws=plus.webview.currentWebview();
nw=plus.webview.create(&/dhnetwork&);
ws.append(nw);
plus.key.addEventListener(&backbutton&,function(){
//查询Webview窗口是否可后退
nw.canBack( function(e){
canback=e.canB
console.log(&canback:&+canback);
//查询Webview窗口是否可前进
nw.canForward( function(e){
canforward=e.canF
console.log(&canforward:&+canforward);
//当进入以后的逻辑判断
if(canback){
nw.back();
if(canforward){
function exit(){
// 弹出提示信息对话框
plus.nativeUI.confirm( &您想要退出吗？&, function(e){
if(e.index==0){
plus.runtime.quit();
}, &您想要退出吗？&, [&Yes&,&No&] );
if(window.plus){
plusReady();
document.addEventListener(&plusready&,plusReady,false);
&/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查看 【预览效果】 。
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&&
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&
&/a&&/nav&
//选项卡点击事件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);
//当前选项值传到父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.targetT
var targetTab = event.detail.targetT
//接下来这里拿到数据后写逻辑代码了...});
不过这里有一个特别需要注意的问题，由于我还没有遇到，但是看官网文档有说明，贴出来方便后来遇到这个问题的同学：
目标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 属性返回节点的类型， 是只读的。比较重要的节点类型有：
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&&html&
&meta charset=&UTF-8&&
&title&&/title&
&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])
&/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.i++){
console.log(&childNodes:&+this.childNodes[i]);
for(var i=0;i&this.children.i++){
console.log(&children:&+this.children[i])
childNodes:[object Text] at html/tabbar.html:85childNodes:[object HTMLImageElement] at html/tabbar.html:85childNodes:[object Text] at html/tabbar.html:85childNodes:[object HTMLSpanElement] at html/tabbar.html:85childNodes:[object Text] at html/tabbar.html:85children:[object HTMLImageElement] at html/tabbar.html:89children:[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 也不仅仅只是这么多内容，很多封装的思路值得我们去学习，小白学习前端的路很长，但是一定要脚踏实地去落实，不要急于求成。
分割线，后再续
因为今天和实验室之前一个哥们儿在图书馆门口遇到，然后聊了很久，然后晚上就没有写这个了，文章中本来还想说说弹出菜单和遮罩mask的处理问题，由于时间关系，承诺一周一文，今天不发好像不太好，先发出来吧，下周再做补充，感兴趣的同学可以先看看demo的源码，也可以等下周在这篇原文继续补充的内容。
文章原始地址是我博客地址：
http://zhaomenghuan.github.io
【MUI从入门到精通】专栏地址：
mui demo地址：
/zhaomenghuan/mui-demo.git
写文章不容易，也许写这些代码就几分钟的事，写一篇大家好接受的文章或许需要几天的酝酿，然后加上几天的码字，累并快乐着。如果文章对您有帮助请我喝杯咖啡吧！
最新教程周点击榜
微信扫一扫