元素自身属性-2

input 通用属性

input 对应的DOM对象类型是 HTMLInputElement

常用的通用属性和方法有：

• value

value属性对应输入框里面的文本

• name

对应name属性

• type

对应type属性

• disabled

是个bool值，表示该按钮是否被禁用，禁用为true，可用为false

下面是一些示例

<input type="text" name="text1">
<button>显示value</button>

<br><br>
<input type="number" name="number1">
<button>显示value</button>


<br><br>
<input type="radio" value="男" name="radio1">
<button>显示value</button>


<br><br>
<input type="checkbox" value="43" name="radio1">
<button>显示value</button>

<br><br>
<input type="color" name="color1">
<button>显示value</button>

<br><br>
<input type="range" name="range1">
<button>显示value</button>

<br><br>
<input type="date" name="date1">
<button>显示value</button>

<br><br>
<input type="time" name="time1">
<button>显示value</button>

<br><br>
<input type="datetime-local" name="datetime-local1">
<button>显示value</button>


<script>
  function getValue(idx){return input[idx].value}
  let buttons = document.querySelectorAll('button')
  let inputs = document.querySelectorAll('input')
  for (let i = 0; i < buttons.length; i++) {
    let j=i
    buttons[i].addEventListener('click', ()=> {
      alert(`type是 ${inputs[j].type} 
value 是 ${inputs[j].value}
name  是 ${inputs[j].name}`)
    })
  } 

</script>

input - text，email，password，number

类型是 text，email，password，number 等这些输入框input，有如下属性

• maxLength/minLength

对应 maxLength/minLength 属性，也就是最多和最少输入的字符数量

• placeholder

对应 placeholder 属性

• readOnly

对应 readOnly 属性，

• size

对应 size 属性，

• select()

全部选中输入框里面的文本

调用该方法前面通常需要先调用focus方法

• setSelectionRange(selectionStart, selectionEnd)

选中指定部分内容，

参数 selectionStart 指定了选中的开始字符索引， selectionEnd指定了选中的结尾字符索引+1， 索引从0开始计数

调用该方法前面通常需要先调用focus方法

• setRangeText(replacement, start, end)

用新字符串替换输入框中指定部分内容，

参数 replacement 指定用来替换的字符串

参数 start, end 是可选参数，

如果没有 start,end 参数，会替换用户选中部分内容，如果用户没有选中内容，则插入到光标位置

如果 有 start,end 参数， 分别指定了替换的开始字符索引 和 结尾字符索引+1， 索引从0开始计数。

<input type="text" id="text-box" size="20" value="Hello world!">

<br><br>

<button id="1">显示文本</button>
<button id="2">选择全部文本</button>
<button id="3">选中前2个字符</button>
<button id="4">setRangeText('ab')</button>
<button id="5">setRangeText('ab',1,3)</button>

<script>
  let [b1,b2,b3,b4,b5] = document.querySelectorAll('button')
  let input = document.querySelector('#text-box')

  b1.addEventListener('click', ()=> {
    alert(`输入框中的内容是${input.value}，替换为 白月黑羽`)
    input.value = '白月黑羽'
  })

  b2.addEventListener('click', ()=> {
    input.focus()
    input.select()
  })

  b3.addEventListener('click', ()=> {
    input.focus();
    input.setSelectionRange(0, 2);
  })

  b4.addEventListener('click', ()=> {
    input.setRangeText('ab');
  })

  b5.addEventListener('click', ()=> {
    input.setRangeText('ab',1,3);
  })
</script>

input - number

类型是 number 的数字输入框, 除了上述属性外，还有下面的属性

• max、min

max指定了 输入框 可输入数字最大值，超过该值时会有错误提示，

min指定了 输入框 可输入数字最小值，小于该值时会有错误提示，

点击增加箭头，不会超过该数值

比如

<input type="number" max="10" min="5"/>

<script>
  const input = document.querySelector('input')
  input.max = 20 
  input.min = 10
</script>

• step

一个数字，表示输入框数字的增减单位，

指示输入框点击上下箭头时，会按这个step为粒度增减。

当输入的数字不是该值的倍数时，会有错误提示

比如

<input type="number" step="2"/>

<script>
  const input = document.querySelector('input')
  input.step = 3
</script>

input - radio，checkbox

下面是 raido 或者 checkbox 类型的 input 常用属性

• checked

该属性值为bool类型，表示是否选中

• defaultChecked

该属性值为bool类型，表示缺省（页面刚加载完成时）是否选中

下面是radio示例

<div>您的性别是

  <br>
  <input type="radio" id="female" name="gender" value="a">
  <label for="female">女</label>
  <button id="1">显示checked</button>

  <br>  
  <input type="radio" id="male" name="gender" value="b" checked>
  <label for="male">男</label>
  <button id="2">显示checked</button>

</div>

<br>

<button id="3">显示选择value</button>

<script>
  function getValue(idx){return input[idx].value}
  let [b1,b2,b3] = document.querySelectorAll('button')

  let female = document.querySelector('#female')
  let male = document.querySelector('#male')

  b1.addEventListener('click', ()=> {
      alert(`checked 是 ${female.checked}，defaultChecked 是 ${female.defaultChecked}`)
  })


  b2.addEventListener('click', ()=> {
      alert(`checked 是 ${male.checked}, defaultChecked 是 ${male.defaultChecked}`)
  })


  b3.addEventListener('click', ()=> {
      alert(`选择的value是 ${document.querySelector("input[name=gender]:checked").value}`)
  })

</script>

注意： input[name="gender"]:checked 里面的 :checked 是CSS伪类选择，表示选择checked状态的元素，对radio和checkbox 类型的input有效

下面是checkbox示例

<div id="lang-choose">选择你要学习的语言
  <div>
    <input type="checkbox" id="Python" name="Python" value='1'>
    <label for="Python">Python</label>
    <button id="1">显示checked</button>
  </div>
  <div>
    <input type="checkbox" id="JavaScript" name="JavaScript" value='2'>
    <label for="JavaScript">JavaScript</label>
  </div>
  <div>
    <input type="checkbox" id="C" name="C" value='3'>
    <label for="C">C</label>
  </div>
  <div>
    <input type="checkbox" id="Java" name="java" value='4' checked>
    <label for="Java">Java</label>
  </div>
</div>

<br>

<button id="3">显示选择value</button>

<script>
  function getValue(idx){return input[idx].value}
  let [b1, b3] = document.querySelectorAll('button')

  b1.addEventListener('click', ()=> {
      alert(`checked 是 ${document.querySelector('#Python').checked}`)
  })

  b3.addEventListener('click', ()=> {
    let selectValues = []
    let list = document.querySelectorAll('#lang-choose input:checked')
    for (let checkbox of list) {
      selectValues.push(checkbox.value)
    }
    alert(`选择的value是 ${selectValues}`)
  })  
</script>

textarea

textarea 对应的DOM对象类型是 对应的DOM对象类型是 HTMLTextAreaElement

常用属性有：

• value

返回/设置 文本框内的输入内容

• rows/cols

rows 、 cols 属性分别指定 输入框的行数和列数

• disabled

返回/设置 是否禁用文本框，被禁用后，就不能输入内容了

• maxLength/minLength

对应 maxLength/minLength 属性，也就是最多和最少输入的字符数量

• placeholder

对应 placeholder 属性

• wrap

返回/设置 一行文字超过文本框宽度时 如何显示，取值为

• off

  一行文字超过文本框宽度时，不换行， textarea元素出现水平滚动条

• soft

  一行文字超过文本框宽度时，剩余内容 折到下一行显示，这是缺省值

• hard

  设置该值时，必须同时指定 cols 属性

  这样，一行文字超过文本框宽度时，浏览器自动插入换行符 (CR+LF)，剩余内容 折到下一行显示

• select()

全部选中输入框里面的文本

调用该方法前面通常需要先调用focus方法

• setSelectionRange(selectionStart, selectionEnd)

选中指定部分内容，

参数 selectionStart 指定了选中的开始字符索引， selectionEnd指定了选中的结尾字符索引+1， 索引从0开始计数

调用该方法前面通常需要先调用focus方法

• setRangeText(replacement, start, end)

用新字符串替换输入框中指定部分内容，

参数 replacement 指定用来替换的字符串

参数 start, end 是可选参数，

如果没有 start,end 参数，会替换用户选中部分内容，如果用户没有选中内容，则插入到光标位置

如果 有 start,end 参数， 分别指定了替换的开始字符索引 和 结尾字符索引+1， 索引从0开始计数。

下面是一个示例

<textarea id="t1" rows="6" cols="30"
>0123456789012345678901234567890123456789

abcdefghijklmnopqrstuvwxyz</textarea>


<br><br>

<button id="1">显示文本</button>
<button id="2">选择全部文本</button>
<button id="3">选中前45个字符</button>
<button id="4">setRangeText('ab')</button>
<button id="5">setRangeText('ab',1,3)</button>
<button id="6">设置行10，列20</button>

<script>
  let [b1,b2,b3,b4,b5,b6] = document.querySelectorAll('button')
  let ta = document.querySelector('#t1')

  b1.addEventListener('click', ()=> {
    alert(`输入框中的内容是${ta.value}，替换为 白月黑羽`)
    ta.value = '白月黑羽'
  })

  b2.addEventListener('click', ()=> {
    ta.focus()
    ta.select()
  })

  b3.addEventListener('click', ()=> {
    ta.focus();
    ta.setSelectionRange(0, 45);
  })

  b4.addEventListener('click', ()=> {
    ta.setRangeText('ab');
  })

  b5.addEventListener('click', ()=> {
    ta.setRangeText('ab',1,3);
  })

  b6.addEventListener('click', ()=> {
    ta.rows=10
    ta.cols=20
  })
</script>

select 和 option

select 对应的DOM对象类型是 HTMLSelectElement

option 对应的DOM对象类型是 HTMLOptionElement

HTMLSelectElement 常用属性、方法有：

• options 只读

返回 HTMLOptionsCollection 对象， 里面存放了所有的option对应的 HTMLOptionElement 对象

• value

返回/设置 第一个选定 option 元素的value属性。

值为 空字符串 表示未选择任何元素。

• selectedIndex

返回/设置 第一个选定 option 元素的索引数字。

值为 -1 表示未选择任何元素。

• disabled

返回/设置 是否禁用选择框，被禁用后，就不能选择了

• type 只读

返回 表示支持多选与否的字符串。 当该select有multiple属性时，返回“select-multiple”； 否则，返回“select-one”

• add(item, before)

添加选项，有两个参数

• item

  新增 HTMLOptionElement 对象 或者 HTMLOptGroupElement 对象

• before

  表示在哪个索引对应的选项前插入，值为数字，插入到index对应的位置上。

  注意，索引从0开始

  该参数可选，如果没有传入值，或者为一个不存在的index，则新选项会插入到最末尾。

具体使用，请看下面示例代码

• remove(index)

删除选项

参数index表示要删除选项的位置索引，值为数字

注意，索引从0开始

HTMLOptionElement 常用属性、方法有：

• value

返回/设置 该 option 元素的value属性

• text

返回/设置 该 option 元素的 选项文本内容

• selected

返回/设置 该 option 元素是否被选择，是为 true，否为 false

• index 只读

返回 该 option 元素的索引值

下面是一个示例

<div>选择学科
  <select name="subjects" multiple size="10">
    <option value="C">C</option>
    <option value="Java" selected>Java</option>
    <option value="Javascript">Javascript</option>
    <option value="autotest" selected>自动化测试</option>
    <option value="gui">图形界面</option>
    <option value="webdev" disabled>web开发</option>
  </select>
</div>

<br><br>

<button id="1">首个选中选项</button>
<button id="2">全部选中选项</button>
<button id="3">添加2个选项</button>
<button id="4">删除第2个选项</button>

<script>
  let [b1,b2,b3,b4] = document.querySelectorAll('button')
  let select = document.querySelector('select')

  b1.addEventListener('click', ()=> {
    alert(`首个选中选项index是${select.selectedIndex}，
    value是${select.value}，`)
  })

  b2.addEventListener('click', ()=> {
    let selectValues = []
    let list = document.querySelectorAll('option:checked')
    for (let option of list) {
      selectValues.push(`${option.text} : ${option.value}`)
    }
    alert(`选择的value是 ${selectValues.join(' | ')}`)
  })

  b3.addEventListener('click', ()=> {
    let opt1 = document.createElement("option");
    let opt2 = document.createElement("option");

    opt1.value = "new add value1";
    opt1.text = "新增选项1-末尾";

    opt2.value = "new add value2";
    opt2.text = "新增选项2-第2个";

    select.add(opt1)
    select.add(opt2,1) //索引从0开始
  })

  b4.addEventListener('click', ()=> {
    select.remove(1) //索引从0开始
  })
</script>