常见DOM操作(JS)

来源：互联网发布：电脑桌面文件整理软件编辑：程序博客网时间：2024/05/17 22:55

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>

0 0