JavaScript 2

一.操作DOM对象

1.1

DOM：文档对象模型

核心：浏览器网页就是一个Dom树形结构

1.更新：更新Dom节点

2.删除：删除一个Dom节点

3.添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个节点

1.1.1获得Dom节点

var h1 = document.getElementsByTagName('h1');
  var p1 = document.getElementById('p1');
  var p2 = document.getElementsByClassName('p2');
  var father = document.getElementById('father');
  var childrens = father.children;//获取父节点下的所有子节点
  // father.firstChild
  // father.lastChild

 1.1.2 更新节点

<div id="id1">

</div>
<script>
  var id1= document.getElementById('id1');
  
</script>

1.修改文本的值 

id1.innerText= '123'
'123'
id1.innerText= '456'
'456'

2.可以解析HTML文本

id1.innerHTML='<string>123</strong>'
'<string>123</strong>'

 3.操作JS

id1.style.color = 'red'//属性使用 字符串 包括
'red'
id1.style.fontSize = '200px'//驼峰命名问题
'200px'
id1.style.padding = '2em'
'2em'

1.1.3 删除节点 

 删除节点步骤：先获取父节点，再通过父节点删除自己

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
   var self = document.getElementById('p1');
   var father = p1.parentElement;
   father.removeChild(self)

   //删除是一个动态的过程
   father.removeChild(father.children[0])
   father.removeChild(father.children[1])
   father.removeChild(father.children[2])
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意 

 1.1.4 插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，就不能这么做了！会产生覆盖

<p id="js">
    javascript
</p>
<div id="list">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="pe">javape</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
</script>
list.appendChild(js);//追加到后面

1.1.5 创建一个新的标签，实现插入

<script>
    var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');//创建一个P标签
    newP.id = 'newP';
    newP.innerText = 'Hello.Kuangshen';
    
</script>

<script>
    var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');//创建一个P标签
    newP.id = 'newP';
    newP.innerText = 'Hello.Kuangshen';
    //创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type',text/javascript)
    //可以创建一个style标签
    var myStyle = document.createElement('style');//创建一个空的Style标签
    myStyle.setAttribute('type',text/css)
    myStyle.innerHTML =' body{background.color:chartreuse;}';//设置标签内容

    document.getElementByTagName('head')[0].appendChild(myStyle)
</script>

1.1.6 insertBefore

 var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    //要包含的节点,insertBefore(newNode,targetNode)
    list.insertBefore(js,ee);

二.操作表单

 2.1 表单是什么 form DOM 树

1.文本框 text

2.下拉框 <select>

h23.单选框 radio

4.多选框 checkbox

5.隐藏框 hidden

6.密码框 password

2.2 表单的目的

1.提交信息

2.2.1 获得要提交的信息

<form action="post">
    <p>
    <span>用户名：</span><input type = "text" id="username">
    </p>
    <!--多选框的值，就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
        
    </p>
</form>
<script>
    var input_text =document.getElementById('username');
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value = '123'
    
    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中
    girl_radio.checked = true;
</script>

2.3 提交表单 

 

<!--表单绑定事件 onsubmit=绑定一个提交检测的函数，true，false
将这个结果返回表单，使用submit接收-->
<form action="post" method="post" onsubmit="aaa()">
  <p>
    <span>用户名：</span><input type = "text" id="username" name="username">
  </p>
  <p>
    <span>密码：</span><input type="text" id="password" name="password">
  </p>
    <input type="hidden" name="password" id="md5-password">
  <!--绑定事件 anclick 被点击-->
    <button type="button" onclick="aaa()">提交</button>
</form>
<script>
    function aaa(){
    alert(1);
    var uname = document.getElementById('username');
    var pwd = document.getElementById('password');
    var md5pwd = document.getElementById('md5-password');
    
    md5pwd.value = md5(pwd.value);
    //可以检验判断表单内容，true就是通过提交：false，组织提交
    return true;
        }
</script>
</body>