DOM元素获取及绑定

一 DOM元素获取
二数据绑定
- 1 mui.ajax()
  - 1-1.以mui.ajax方法示例来说明需要强调的几点：
  - 1-2.mui.ajax参考地址一览：
- 2 数据拼接绑定流程
  - 使用代码片段演示说明如下：

一 DOM元素获取

1 原生js方式获取元素：

1.querySelector获取元素（Id名/Class名/tag标签名），如 document.querySelector('.mui-content');

//获取当前页面元素中Class类名为'mui-icon'的元素下的图片元素，并修改img的src属性
document.querySelector('.mui-icon img').setAttribute('src', '../images/sun.png');
//在当前元素父元素中查询id为'List'的元素
var placeholder = this.element.parentNode.querySelector('#List');

2.querySelectorAll 获取元素集合（Class名/tag标签名），如 document.querySelectorAll('.mui-content');

//获取当前页面元素中所有button(按钮)元素,return一个数组
var btn = document.querySelectorAll('button');
//获取当前元素中所有button(按钮)元素,return一个数组[一般用于函数方法中]
var btn = ele.querySelectorAll('button');

3.常用的 getElementById/getElementsByClassName/getElementsByTagName

//获取id为'offCanvasShow'的关闭侧滑菜单按钮
document.getElementById('offCanvasShow');
//获取当前页面元素中Class类名为'mui-show-loading'的加载框
var toast=document.getElementsByClassName('mui-show-loading');
//获取placeholder元素中所有<span>标签数组中下标为1(第2个)元素的文本
placeholder.getElementsByTagName('span')[1].innerText

2 mui()方式获取元素：

除了mui自带方法，我们在用的过程中，要和原生方法一样获取元素，需要多留心一下mui(‘.title’)获取的是一个集合数组,需要通过添加下标的方式来获取元素。

//获取Class为'title'的元素
mui('.title')[0];
//获取id为'test'的元素
mui('#test')[0];

3 js/mui获取元素对比：

1.HTML示例元素：

<ul class="mui-table-view mui-table-view-chevron">
    <li class="mui-table-view-cell" chapter-id="2849117">第一章：发现秘密</li>
    <li class="mui-table-view-cell" chapter-id="2849118">第二章：视频</li>
</ul>

2.获取宽高

//js方式获取第一个li元素高度
document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].offsetHeight;
//mui方式获取第一个li元素高度
mui("ul li")[0].offsetHeight;

3.添加或删除Class属性（Class类），mui和原生是相同的

//js方式给第一个li元素添加删除Class属性
var obj = document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0];
obj.classList.add("mui-active");
obj.classList.remove("mui-active");
//单个class情况下可以使用的方式
obj.setAttribute("class", "mui-active");
//mui方式给第一个li元素添加删除Class属性
mui("ul li")[0].classList.add("mui-active");
mui("ul li")[0].classList.remove("mui-active");
//或者直接重置所有Class类名
mui("ul li")[0].className = "mui-table-view-cell mui-active";
mui("ul li")[0].className = "mui-table-view-cell";
//单个class情况下可用
mui("ul li")[0].setAttribute("class", "mui-active");

注意：JQ的addClass()/removeClass()方法在原生及mui中是无效的。

4.设置或获取CSS属性

//js设置css属性的几种方式
var obj = document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0];
obj.style.backgroundColor= "black";
obj.style.cssText = "background-color:black; display:block;color:White;"
//mui设置方式和原生js相同
mui("ul li")[0].style.backgroundColor= "black";
mui("ul li")[0].style.cssText = "background-color:black; display:block;"

5.拓展：关于CSS样式，若整个页面中有大量CSS样式需要替换设置（比如换肤的需求），建议采用点击替换CSS外联文件的方式

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
<div class = "themesChange">切换主题</div>
<script>
mui('body').on('tap','.themesChange',function(){
 changeStyle4();
});
function changeStyle4() {
    var obj = document.getElementById("css");
    obj.setAttribute("href","css2.css");
}
</script>

二数据绑定

mui 目前没有自己特定的数据绑定方式，数据主要是用mui 封装好的ajax获取json数据，然后用原生js拼接，把html代码加载到页面。

1 mui.ajax()

mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型；本着极简的设计原则，mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。
使用方法和jquery大致相同，具体文档可查看官网API： http://dev.dcloud.net.cn/mui/ajax/

mui.ajax('http://server-name/login.php',{
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json',//服务器返回json格式数据
    type:'post',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒；
    headers:{'Content-Type':'application/json'},                  
    success:function(data){
        //服务器返回响应，根据响应结果，分析是否登录成功；
        ...
    },
    error:function(xhr,type,errorThrown){
        //异常处理；
        console.log(type);
    }
});

1-1.以mui.ajax方法示例来说明需要强调的几点：

1.headers:指定HTTP请求的Header，数据类型（如：Json）;
2.data:发送到服务器的业务数据，一般是对象或字符串，类似Ajax函数的header参数（如：发送请求token或者必要参数）

1-2.mui.ajax参考地址一览：

官网API: http://dev.dcloud.net.cn/mui/ajax/
mui.ajax()方法中的XMLHttpRequest: http://ask.dcloud.net.cn/article/865
mui.getJSONP()实现Web跨域: http://ask.dcloud.net.cn/article/833

2 数据拼接绑定流程

1.请求获取到服务器返回的数据data
2.获取到目标元素
3.将目标元素的内容(子元素）清空【视情况而定，如果是加载更多，则不需要此操作】
4.创建一个临时dom片段，用来存放循环创建的数据（非必需）
5.使用mui.each()来循环data，创建子元素
6.使用appendChild()方法将循环创建的子元素添加到临时dom片段中
7.使用appendChild()方法将临时dom片段添加到目标元素中

使用代码片段演示说明如下：

function chapterList() {
    var obj = {
        bookid: bookid,
        num: num
    }
    mainapi('chapterList', obj, function(res) {
        //1.获取到服务器返回的数据
        var chapter = res.data.chapter;
        totalnum = res.data.totalnum;
        //2.两种方式任选一种获取到目标元素
        //var ul = mui('.mui-content ul')[0];
        var ul = document.body.querySelector('.mui-table-view');
        //3.将目标元素的内容重置为空（清空目标元素）
        ul.innerHTML = '';
        //4.创建一个dom片段，用来存放循环的数据
        var frag = document.createDocumentFragment();
        //5.使用mui.each()循环data,创建子元素li
        mui.each(chapter, function(index, item) {
            var viptext = item.isvip ? '<span class="mui-badge mui-icon mui-icon-locked"></span>' : '';
            var li = document.createElement('li');
            li.classList = 'mui-table-view-cell';
            li.innerHTML = item.name + viptext;
            li.setAttribute('chapter-id', item.id);
            li.setAttribute('chapter-vip', item.isvip);
            //6.将每次循环生成的li推荐临时dom片段中
            frag.appendChild(li);
        });
        //7.将临时dom片段推入目标元素中,数据拼接绑定完成
        ul.appendChild(frag);
    });
}

扩展：appendChild() 方法向节点添加最后一个子节点。