【DOM操作】DOM操作HTML中的Select标签

Select DOM

序号

IE

Firefox

备注

1

option innerText

option text

var option = document.createElement("option");

        option.value = "120";

        option.innerText = "--请选择--";

        option.selected = "selected";

兼容写法：option.innerText = option.text = "--请选择--";

在读取时text都支持

2

removeChild

removeChild

selects.removeChild( selects.childNodes[i] );

3

insertBefore

insertBefore

var clone = htmlTagArr.cloneNode(  );

     clone.setAttribute( "clone", true );

htmlTagArr.parentNode.insertBefore( clone, htmlTagArr );

4

document.createDocumentFragment()document.createDocumentFragment()创建一个空结点

5

selects.removeChild( selects.options[i] );

selects.removeChild( selects.options[i] );

这二个浏览器都不能完全删除option,请使用上面2中方法

6

previousSibling

previousSibling

支持

7

nextSibling

nextSibling

支持

8

selects.removeNode( selects.childNodes[i] );

selects.removeNode( selects.childNodes[i] );

IE支持，但是把整个select对象删除，Firefox不支持

9

replaceChild

replaceChild

 var news = document.createTextNode("div");

 var old = newDiv.childNodes[0];   

 old.replaceChild( news, old.childNodes[0] );

10

 option.selected 

 option.selected 

FireFox支持：

var selects = id( "select1" );

    var option = document.createElement("option");

        option.value = "120";

        option.innerText = option.text = "--请选择--";

        option.selected = true;

IE支持：

11

selects.childNodes[0].setAttribute("selected", true) ;

selects.childNodes[0].setAttribute("selected", true) ;

支持

12

selects.nodeName 

selects.tagName

selects.nodeName 

selects.tagName

支持

13

elects.ownerDocument.childNodes.item(1).nodeName 

elects.ownerDocument.childNodes.item(1).nodeName 

item(0) IE:#comment FireFox:html

item(1) IE:htmlFireFox:html

item(2) IE:报错 FireFox:报错

ownerDocument 属性以 Document 对象的形式返回节点的 owner document。

在 HTML 中，HTML 文档本身始终是元素的 ownerDocument。

14

selects.attributes[0].ownerElement.nodeName

selects.attributes[0].ownerElement.nodeName

ownerElement 属性返回 attribute 所附属的元素节点。

15

onchange="alert( this.options[this.selectedIndex].value );

onchange="alert( this.options[this.selectedIndex].value );

支持

16

select 多选JS获取值

select 多选JS获取值

<select id="select" multiple="true" >

      <option value="0">上海 </option>

      <option value="1">上海 </option>

    </select>

var select = document.getElementById( "select" );

        for ( var i = 0, len = select.childNodes.length; i < len; i++ ) {

          if( select.childNodes[ i ].selected ) {

            alert( select.childNodes[ i ].value );

          }

        }