常见DOM操作(JS)

DOM

获取节点设置样式

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em'

动态创建一个节点

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

这样我们就动态添加了一个新的节点：

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

创建一个样式标签，将页面变为红色

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

将子节点插到指定节点之前

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

可以这么写：

var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

新的HTML结构如下：

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

按字符串顺序重新排序DOM节点

<!-- HTML结构 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

// sort list:
var testList=document.getElementById("test-list");
var lis=document.getElementsByClassName('lang');

for(let i=0;i<lis.length;i++){
    for(let j=i+1;j<lis.length;j++){
        if(lis[i].innerText >lis[j].innerText){
            testList.insertBefore(lis[j],lis[i])
        }
    }
}

遍历ul中的节点

<!-- HTML结构 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

var list = document.getElementById("test-list");
for(var i=0;i<list.children.length;i++){
    var child=list.children[i].innerHTML;
    alert(child);
}

删除ul中的特定节点

<!-- HTML结构 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

'use strict';
// TODO
//var p=docuemnt.getElementById('test-list');
//var valid=new Set(['JavaScript','HTML','CSS']);
var list = document.getElementById("test-list");
var valid = new Set(['JavaScript', 'HTML', 'CSS']);
for(var i=0;i<list.children.length;i++){
    var child = list.children[i];
    if(!valid.has(child.innerText)){
        list.removeChild(child);
        i--;//子节点总数已变化
    }
}
var list = document.getElementById("test-list");
for(var i=0;i<list.children.length;i++){
    var child=list.children[i].innerHTML;
    alert(child);
}

表单

获取文本框中的值

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'

提交表单

方式一是通过元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单：

<!-- HTML -->
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 提交form:
form.submit();
}
</script>

第二种方式是响应本身的onsubmit事件，在提交form时作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
}
</script>

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

使用MD5来传输口令

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var pwd = document.getElementById('password');
    // 把用户输入的明文变为MD5:
    pwd.value = toMD5(pwd.value);
    // 继续下一步:
    return true;
}
</script>

这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个变成32个（因为MD5有32个字符）。

要想不改变用户的输入，可以利用<input type="hidden">实现：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把用户输入的明文变为MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 继续下一步:
    return true;
}
</script>

注意到id为md5-password的<input>标记了name=”password”，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。

利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：
- 用户名必须是3-10位英文字母或数字；
- 口令必须是6-20位；
- 两次输入口令必须一致。

<!-- HTML结构 -->
<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
    <p id="test-error" style="color:red"></p>
    <p>
        用户名: <input type="text" id="username" name="username">
    </p>
    <p>
        口令: <input type="password" id="password" name="password">
    </p>
    <p>
        重复口令: <input type="password" id="password-2">
    </p>
    <p>
        <button type="submit">提交</button> <button type="reset">重置</button>
    </p>
</form>

    'use strict'
    var checkRegisterForm=function(){
        // TODO:获取用户名、口令、重复口令标签中的值
        var username=document.getElementById('username').value;
        var password=document.getElementById('password').value;
        var password2=document.getElementById('password-2').value;
        //判断用户名是否符合规则
        var regUsername=/^[\w]{3,10}$/;
        var flag1=regUsername.test(username);
        //判断口令是否符合规则
        var regPassword=/^.{6,20}$/;
        var flag2=regPassword.test(password);
        //判断两次口令输入是否相同
        var flag3=password===password2?true:false;
        if(flag1&&flag2&&flag3){
            return true;
        }else{
            return false;
    }

}

操作文件

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.');
    return false;
}

上传图片

<form method="post" action="http://localhost/test" enctype="multipart/form-data">
    <p>图片预览：</p>
    <p></p><div id="test-image-preview"
                style="border: 1px solid #ccc; width: 100%; height: 200px; background-size: contain;
                 background-repeat: no-repeat;
                 background-position: center center;"></div>
    <p></p>
    <p>
        <input type="file" id="test-image-file" name="test">
    </p>
    <p id="test-file-info"></p>
</form>

<script>
    var
        fileInput=document.getElementById('test-image-file');
        info=document.getElementById('test-file-info');
        preview=document.getElementById('test-image-preview');

    //监听chang事件
    fileInput.addEventListener('change',function(){
        //清除背景图片
        preview.style.backgroundImage='';
        //检查文件是否选择
        if(!fileInput.value){
            info.innerHTML='没有选择文件';
            return;
        }
        //获取file引用
        var file=fileInput.files[0];
        //获取File信息
        info.innerHTML='文件'+file.name+'<br>'+
                        '大小'+file.size+'<br>'+
                        '修改'+file.lastModifiedDate+'<br>';
        if(file.type!='image/jpeg'&&file.type!='image/png'&&file.type!='image/gif'){
            alert('不是有效的图片文件');
            return;
        }
        //读取文件
        var reader=new FileReader();
        reader.onload=function(e){
            var
                    data=e.target.result;
            preview.style.backgroundImage='url('+data+')';
        }
        //以dataUrl的形式读取文件
        reader.readAsDataURL(file);

    })

</script>