求教 document.getElementById 的用法

Posted 2023-04-03

document.getElementById("a").innerText("显示内容"); 是什么意思啊？？ 若是有一个 <input type="text" name="a"> 的文本框 document.getElementById("a").innerText("显示内容"); 是不是可以实现 在文本框a里输出 “显示内容” 这句话啊？？

1、getElementById

作用：一般页面里ID是唯一的，用于准备定为一个元素
语法： document.getElementById(id)
参数：id :必选项为字符串(String)
返回值：对象; 返回相同id对象中的第一个，按在页面中出现的次序,如果无符合条件的对象，则返回 null

example：
document.getElementById("id1").value;

2、getElementsByName

作用：按元素的名称查找，返回一个同名元素的数组
语法： document.getElementsByName(name)
参数：name :必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组，按在页面中出现的次序

example：
document.getElementsByName("name1")[0].value;
document.getElementsByName("name1")[1].value;

3、getElementsByTagName

作用：按html标签名查询，返回一个相同标签元素的数组
语法： object.getElementsByTagName(tagname) object可以是document或event.srcElement.parentElement等
参数：tagname:必选项为字符串(String)，根据HTML标签检索。
返回值：数组对象; 如果无符合条件的对象，则返回空数组，按在页面中出现的次序

example：
document.getElementsByTagName("p")[0].childNodes[0].nodeValue;
document.getElementsByTagName("p")[1].childNodes[0].nodeValue 参考技术A 对 就是这个意思document.getElementById("a").innerText("显示内容");前面的document.getElementById("a")是根据控件ID获取对象，后面的innerText("显示内容")是个方法，就是写入文本内容。 参考技术B 不是的，<input type="text" ID="a">,document.getElementById("a").innerText("显示内容")

移动端实现复制内容至剪贴板

需求场景

使用document.execCommand()方法，以下简称为“命令API”。

示例一

HTML部分

<input type="text" id="text_input" />
<button type="button" id="copy_text">copy</button>

JavaScript部分

var inputElem = document.getElementById(‘text_input‘);
var btnElem = document.getElementById(‘copy_text‘);
btnElem.addEventListener(‘click‘, function() {
  if(!document.execCommand) {
    console.error(‘copy unsupport‘);
    return;
  }
  inputElem.select();
  var result = document.execCommand(‘copy‘);
  if(result) {
    console.log(‘copy success‘);
  } else {
    console.error(‘copy fail‘);
  }
});

示例二

实际开发中，需要复制的内容通常是文本元素中的文本。此时，可以使用一个不在可见区域内的表单元素来变向实现。

HTML部分

<input type="text" id="text_input"  />
<p>paragraph</p>
<button type="button" id="copy_text">copy</button>

CSS部分

#text_input {
  position: absolute;
  top: -100px;
}

JavaScript部分

var inputElem = document.getElementById(‘text_input‘);
var btnElem = document.getElementById(‘copy_text‘);
var textElem = document.querySelector(‘p‘);
btnElem.addEventListener(‘click‘, function() {
  if(!document.execCommand) {
    console.error(‘当前环境不支持复制功能‘);
    return;
  }
  inputElem.value = textElem.innerText;
  inputElem.select();
  var result = document.execCommand(‘copy‘);
  if(result) {
    console.log(‘copy success‘);
  } else {
    console.error(‘copy fail‘);
  }
});

与例子一的差别在于，选中表单元素前，需要对其进行赋值操作。

注意事项

• 检测当前环境是否支持命令API，这一步不可或缺。
• 浏览器环境不支持命令API，需要合理地提示用户手动进行复制操作。所以，一定不能设置文本元素 user-select: none;，这样会使文本不能被选择。
• 表单元素必须处于被选中状态，即调用 inputElement.select() 方法，文本元素没有 select() 方法。
• 经测试，不能使用 display: none; 或 visibility: hidden; 来隐藏表单元素。所以，只能将此表单元素，定位至可以见区域之外。

更多方案

• clipboard.js：不依赖flash的一个插件。实现原理和上面的例子是类似的，使用插件可以简化很多开发工作。