-
获取HTML标签元素
- getElementById('tagId') //通过id属性获取
- getElementsByTagName('tagName') //通过标签名获取,得到数组，通过下标可定位
- getElementsByName('tagAttrName') //通过name属性来获取元素
- getElementsByClassName('tagClassName') //通过class属性来获取元素
- querySelector('') //可以通过id->#,class->. ,标签来获取元素，只获取该属性的第一个元素
- querySelectorAll('') //获取该条件的全部元素，可通过下标定位元素
-
操作HTML元素
- 添加元素节点
var _divBox = document.getElementById('divBox'); //获取页面中div元素对象
var _p = document.createElement('p'); //创建p节点
var _txt = document.createTextNode('this is zboy\'s para!'); //创建文本节点
_p.appendChild(_txt); //将文本填充到p节点中去
_divBox.appendChild(_p); //再将p节点添加到div容器中
//不创建文本节点，直接填充内容
var _divBox = document.getElementById('divBox'); //获取页面中div元素对象
_divBox.innerHTML='<p>这是通过innerHTML填充的元素！</p>';
//使用innerHTML的时候要注意,他是将该元素从起始到结束全部替换后面的内容
- 移除元素节点
var _divBox = document.getElementById('divBox'); //获取页面中div元素对象
var _p = document.getElementsByTagName('p'); //获取页面中p节点
_divBox.removeChild(_p); //移除p标签节点
//或者直接可以通过下面代码来删除指定元素
var _p = document.getElementsByTagName('p'); //获取页面中p节点
_p.parentNode.removeChild(_p) //删除该指定节点
- 改变元素属性
var _divBox = document.getElementById('divBox'); //获取页面中div元素对象
_divBox.name='divBox'; //设置/改变divBox元素属性name为‘divBox’
var _p = document.getElementsByTagName('p')[0]; //获取页面中p节点
_p.id='paras'; //设置/改变p标签的id为‘paras’
- 改变元素样式
var _divBox = document.getElementById('divBox'); //获取页面中div元素对象
_divBox.style.backgroundColor='#FF0000'; //设置div容器的背景色为红色
//这里的style后的名称和css一致，将-连字符改成驼峰式
- 获取元素中内容
//获取元素中的HTML元素
_divBox.innerHTML = '<button>button</button>';
var _html = _divBox.innerHTML; //输出<button>button</button>
//获取元素中文本
var _txt = _divBox.innerText; //输出button
//获取包含自身的HTML元素
var _outerHTML = _divBox.outerHTML //输出 <div id='divBox' name='divBox' style='...'><button>button</button></div>
