day38 操纵节点和表单

标签：day38 value 表单 getElementById var js document 节点

更新dom节点

写一些div标签

<div id="id1">
 ​
 </div>
 <h1>标题</h1>
 <div id="father">
     <p id="p1">p1</p>
     <p class="p2">p2</p>
     <p >p3</p>
 </div>

 

 

使用document获取id或者class的值

使用innertext或者innerhtml修改文本的值

 var id1 = document.getElementById('id1')
 id1.innerText='123123'//修改文本的值
 id1.innerHTML='<strong>345345</strong>'//解析HTML文本标签

 

同时也可以操作js的格式

 id1.style.color='yellow'//操作js
 id1.style.fontSize='100px'

 

删除dom节点

寻找父节点，从父结点删除自身节点

 var self = document.getElementById('p1')
 var father = self.parentElement
 father.removeChild(p1)

 

插入dom节点

设置一些元素标签

 <p id="js">js</p>
 <div id="list">
     <p id="se">javase</p>
     <p id="ee">javaee</p>
     <p id="me">javame</p>
 </div>

 

创建一个新节点追加插入 使用append（）

通过setAttribute设置创建节点的值

使用键值对

 var js =document.getElementById('js'),
     list = document.getElementById('list');
 //list.append(js)//追加
 var newp=document.createElement('p')
 newp.id = 'newp';
 //newp.setAttribute('id','newp')
 newp.innerHTML = 'hello gugu';
 ​
 list.append(newp)
 //创建一个标签节点
 var myscript =document.createElement('script')
 //通过setAttribute可以设置任意的值
 myscript.setAttribute('type','text/javascript')
 list.appendChild(myscript)

 

也可以创建style标签改变格式

//创建一个style标签
 var mystyle = document.createElement('style')
 mystyle.setAttribute('type','text/css')
 mystyle.innerHTML='body{}'
 document.getElementsByTagName('head')[0].appendChild(mystyle)

 

可以选择在节点前插入节点

 //在之前插入节点，找被包含的节点前.insertBefore(插入节点,被插入节点)
 var ee = document.getElementById('ee')
 list.insertBefore(js,ee)

 

操作表单

定义标签

 <form action="post">
     <p>
     <span>用户名：</span>
     <input type="text" id="username" required>
     </p>
 ​
 <!--    单选框和多选框的值，是定义好的value-->
     <p>
         <span>性别：</span>
         <input type="radio" name="sex" value="男" id="boy">男
         <input type="radio" name="sex" value="女" id="girl">女
     </p>
 ​
     <p>
         <input type="submit">
     </p>
 </form>

 

操作单选框和多选框的值

 var username = document.getElementById('username')
  //得到输入框的值
 //赋值
 //username.value=123
 ​
 ​
 var  boy_radio = document.getElementById('boy')
 var  girl_radio = document.getElementById('girl')
  //对于单选多选框，使用boy_radio.value只能取得固定的值，而不是当前选中的值
 boy_radio.checked
 //查看返回结果，选中返回true，否则返回false

 

提交表单

表单绑定onsubmit事件

<!--
 表单绑定onsubmit事件
 绑定一个提交检测的函数
 onsubmit="return check（）
 -->
 <form action="#" method="post" onsubmit="return check()">
     <p>
         <span>用户名：</span>
         <input type="text" id="username" required name="username">
     </p>
 ​
     <p>
         <span>密码:</span>
         <input type="text" id="input-password" >
     </p>
     <input type="hidden" id="md5-password" name="password">
 ​
 <!--    绑定事件，onclick，被点击的时候执行-->
    <button type="submit" onclick="check()">提交</button>
 </form>

 

设置表单函数

使用md5对密码进行加密

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

　　

 <script>
 ​
     function check(){
        var uname = document.getElementById('username')
        var pwd = document.getElementById('input-password')
        var md5pwd = document.getElementById('md5-password')
         console.log(uname.value)
         //md5算法加密密码
         pwd.value = md5(pwd.value)
         console.log(pwd.value)
         md5pwd.value = md5(pwd.value)
         return true
     }
 </script>

 

标签：day38,value,表单,getElementById,var,js,document,节点
From： https://www.cnblogs.com/GUGUZIZI/p/16960943.html