DOM操做form表单

DOM操作form表单：

1.document.forms 获取文本中的所有form表单

<form action="">

<input type="text">

</form>

<form action="">

<input type="text">

</form>

<script> let forms = document.forms; console.log(forms); 
//得到两个form节点 let children = forms[1].children[0];//得到第一个form节点下的第一个子节点

</script>

2.DOM对节点的增删改查：

是针对上面的代码元素

1.增加元素 element.appendChild(ele)

<script> 
     var ipt1 = document.createElement('input');
     ipt1.type = 'password'; forms[0].appendChild(ipt1); 
</script>

 

2.插入文本节点   element.insertBefore(ele,oldele)

<script>
 var ipt = document.createElement('input');
 ipt.type = 'password'; 
 forms[0].insertBefore(ipt2,ipt1);

</script>

3.修改元素节点    element.replaceChild(ele,oldele)

<script>
 let children = forms[1].children[0]; 
 var ipt = document.createElement('input');
 ipt.type = 'password'; 
 forms[1].replaceChild(ipt,children); 
</script>

4.移除元素节点 element.removeChilde(ele)

<script> 
  forms[0].removeChild(ipt2)
 </script>

注意 ：生成的元素对象只能使用一次，不能重复使用

HTML DOM

1.什么是HTML DOM？

HTML DOM不仅对访问属性进行了简化，而且还对一些常用结构复杂的元素，提供了简化版的对象和函数

2.什么时候使用HTML DOM

只要可以使用简化版的对象和函数，都要优先使用简化版的对象和函数

3.HTML DOM问题

不是所有的元素都有简化，如果简化版不能使用就用原DOM对象和函数进行补充

Image

image代表嵌入的图像，img标签每次出现一次，image对象就会创建一次

  <script> let img = new Image(); //生成一个img对象 
  img.src = '小人/10.png'; //给img对象的属性赋值 
  var body = document.body; //得到文档中body标签 
  body.appendChild(img)//往body里面添加img元素
 </script>

注意：在js中，new是不推荐的，常用Image和option才能new，别的元素老老实实的使用creatElement

form表单中的select元素和option：

select：

1：select.options:获取select下的所有option元素

<select onchange="fn()">

    <option >liquan</option>
    
    <option >chenyuanling</option>

    <option >zhaoxin</option>

    <option >wangshan</option>

    </select>

<script>
     var select=document.querySelector('select');
     var options = select.options; //获取select下的所有option console.log(options); 
</script>

2.select.length 获取select下的option的个数

<script> 
console.log(select.length);//4 
//实例 
//清空
select select.length = 0; 
</script>

3: select.value 自动获取选中的option的value的值，如果option没有value值，也不会空手而归，会去option的文本内容返回出来,

<script>
 var select =document.querySelector('select'); 
function fn(){ console.log(select.value); } 
</script>

4:select.selectedIndex 返回当前选中的下标，下标是从0开始的

<script>
 var select = document.querySelector('select');
 function fn(){ console.log(select.selectedIndex); } 
</script>

方法：

1.select.add(option)增加option

<script> 
    var option = new Option(); //生成一个option元素 
    option.text = 'yemengyu';
     select.add(option)
 </script>

2.select.remove(i) 移除i位置option

<script>
 select.remove(0)//移除第一个remove元素 
</script>

事件：

1.onchange 当选中项发生改变时调用JS函数

前面的代码中有写到

Option：

1.创建option元素

<script>
     var option = new Option(); //生成一个option元素 
     option.text = 'yemengyu'; 
     select.add(option)
     select.remove(0)

</script>

2.属性

<script> 
//1.option.text 代替了innerHTML表示内容文本 
//2.option.index 代表了当前option在select下的下标 
//3.option.value 代表了当前选中项option的value的值 
</script>