[JavaScript知识库]JavaScirpt对页面元素的基础操作

1.获取网页标签

基本语法：

根据id属性获取页面元素

var ele = document.getElementById('id');

根据name获取多个元素

    var ele = document.getElementsByName('name')

根据标签名获取多个元素

    var ele = document.getElementsByTagName('标签名')

根据类名获取多个元素

var ele = document.getElementsByClassName('class')

h5新增获取单个元素以及多个元素的方式

 var ele = document.querySelector('.类名')
 var ele = document.querySelector('标签名')
 var ele = document.querySelector('#id')

  var ele = document.querySelectorAll('.类名')
  var ele = document.querySelectorAll('标签名')

2.事件驱动

获取页面上的标签之后，就可以通过事件来操作标签，如点击事件、鼠标移入事件、键盘按键弹起事件等

特点：表示用户的一个操作行为，以标签属性的形式出现、名称以on开头

 ele.onclick = function() {
     alert(1)
 }

3.操作标签属性

JavaScript提供固定的操作标签属性的语法

获取属性值： ele.属性名 或者 ele【‘属性名’】

设置属性值:?ele.属性名='属性值' 或者 ele【‘属性名’】='属性值'

console.log(ele.title);
console.log(ele['title']);
ele.title = '标题';
ele['title'] = '标题'

4.操作标签样式

JavaScrip提供了固定的操作标签样式的语法

获取行内样式：ele.style.样式名?

获取非行内样式： IE浏览器：ele.currentStyle.样式 非IE浏览器:getComputedSty;e(ele).样式

设置样式：ele.style.样式名='样式'

（注：在获取或者设置样式时，通过短横线连接的样式名需要采用驼峰式命名法）

console.log(ele.style.border);
console.log(ele.currentStyle.fontSize);
console.log(getComputedStely(ele).color);
ele.style.display = 'none';

5.操作标签内容

JavaScript提供了固定的语法，可以操作闭合标签和表单的内容

获取闭合标签内容：ele.innerText? (纯文本内容) ele.innerHTML? (处理标签)

设置闭合标签内容：ele.innerText = '文本内容'? ele.innerHTML = 'html内容'

console.log(ele.innerText);
console.log(ele.innerHTML);
ele.innerText = '<h2>hello</h2>';
ele.innerHTML = '<h2>hello</h2>';

获取表单内容：ele.value

设置表单内容:: ele.value = '表单内容'

console.log(ele.value);
ele.value = '请输入密码';