前端逼死强迫症之DOM
Dom：document。相当于把所有的html文件，转换成了文档对象。
之前说过：html-裸体的人；css-穿上衣服；js-让人动起来。
让人动起来，就得先找到他，再修改它内容或属性。
- 找到标签
- 操作标签
- 事件
一、查找元素
1.直接查找
document.getElementById('i1') 根据ID获取一个元素
document.getElementsByTagName('div') 根据标签名获取标签集合
document.getElementsByClassName('div') 获取class多个元素(列表)
document.getElementsByName 获取name多个元素(列表)
2.间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
二、操作标签
1.内容操作
标签.innerText 获取标签中的文本内容
标签.innerText = "" 对标签内部文本进行重新复制
outerText
innerHTML HTML内容
innerHTML
value 值
2.样式操作
className tag.className='c1' 直接整体做操作 tag.classList.add('c2') 添加指定样式 tag.classList.remove('c2') 删除指定样式 PS：onclick点击操作 <div onclick='func();'>点我</div> <script> function func(){ } </script>
className // 样式，返回字符串
classList // 样式，返回数组
classList.add() // 添加样式
classList.remove() // 移出样式
- 更细力度设置样式
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red"
3.属性操作
setAttribute(key,value) // 设置标签属性
removeAttribute(key) // 移除标签属性
attributes // 获取所有标签属性
getAttribute(key) // 获取指定标签属性
创建标签，并添加到HTML中：
- a. 字符串形式
- b. 对象的方式
document.createElement(‘div’)
<body> <input type="button" onclick="AddEle1();" value="+" /> <input type="button" onclick="AddEle2();" value="+" /> <div id="i1"> <p><input type="text" /></p> </div> <script> // 第一种添加方式：字符串形式 function AddEle1(){ // 创建一个标签 // 将标签添加到i1里面 var tag = "<p><input type='text'/></p>"; // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } // 第二种添加方式：对象的方式 function AddEle2(){ // 创建一个标签 // 将标签添加到i1里面 var tag = document.createElement('input'); tag.setAttribute('type', 'text'); tag.style.fontSize = '16px'; tag.style.color = 'red'; var p = document.createElement('p'); p.appendChild(tag); document.getElementById('i1').appendChild(p); } </script> </body>
4.提交表单
默认情况下：只有多行文本textarea、下拉框select 和input 标签可以数据提交到后台。
通过DOM任何标签都可提交表单。
<body> <form id="f1" action="http://www.cnblogs.com/lixiaoliuer/p/7155938.html"> <input type="text" /> <input type="submit" value="提交1" /> <a onclick="submitForm();">提交2</a> </form> <script> function submitForm(){ document.getElementById("f1").submit() } </script> </body>
5.其他操作
console.log // 输出框
alert // 弹出框
confirm // 确认框
// URL和刷新
location.href // 获取当前URL
location.href = "url" // 设置URL 重定向
location.reload() // 重新加载，刷新
// 定时器
setInterval // 多次定时器
clearInterval // 清除多次定时器
setTimeout // 单次定时器
clearTimeout // 清除单次定时器
<body> <form id="f1" action="http://www.oldboyedu.com"> <input type="text" /> <input type="submit" value="提交1" /> <a onclick="submitForm();">提交2</a> </form> <script> function submitForm(){ //document.getElementById('f1').submit() //alert(123); var v = confirm('真的要提交吗？'); console.log(v); // v 鼠标点击确定、取消的返回值。 } // 定时器，一直执行 var obj = setInterval(function(){ console.log(1); clearInterval(obj); // 清除定时器 }, 1000); // 定时器，只执行一次 setTimeout(function () { console.log('timeout'); },15000); </script> </body>
<body> <div id="status"></div> <input type="button" value="删除" onclick="DeleteEle();" /> <script> function DeleteEle(){ document.getElementById('status').innerText = "已删除"; setTimeout(function () { document.getElementById('status').innerText = ""; }, 3000); } </script> </body>
三、事件
1.行为 样式 结果相分离的页面
- 实现表格，鼠标移上去后，变色
<body> <table border="1" width="300px"> <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr> <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr> <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr> </table> <script> function t1(n){ var myTrs = document.getElementsByTagName("tr")[n]; // console.log(myTrs); myTrs.style.backgroundColor = "red"; } function t2(n){ var myTrs = document.getElementsByTagName("tr")[n]; myTrs.style.backgroundColor = ""; } </script> </body>
- 优化后 —> 行为(js) 样式(css) 结构(html) 相分离
<body> <table id="i1" border="1" width="300px"> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> <tr><td>1</td><td>2</td><td>2</td></tr> </table> <script> var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++){ myTrs[i].onmouseover = function(){ // 谁调用这个函数，this指向谁 this.style.backgroundColor = "red"; }; myTrs[i].onmouseout = function(){ this.style.backgroundColor = ""; } } </script> </body>
2.绑定事件的两种方式
- a. 直接标签绑定 onclick=’xxx()’ onfocus
- b. 先获取Dom对象，然后进行绑定
-
- document.getElementById(‘xx’).onclick
- document.getElementById(‘xx’).onfocus
a. 第一种绑定方式：直接标签绑定
<input id='i1' type='button' onclick='ClickOn(this)'> function ClickOn(ths){ // ths(形参) 当前点击的标签 }
b. 第二种绑定方式：先获取Dom对象，然后进行绑定
<input id='i1' type='button' > document.getElementById('i1').onclick = function(){ // this 代指当前点击的标签 }
注意this这里不要乱用，两种绑定方式不同，this传入的时候也是不同的
c. 第三种绑定方式：同时绑定多个事件
<script> var mydiv = document.getElementById("i1"); mydiv.addEventListener('click',function(){console.log('aaa'),false}); mydiv.addEventListener('click',function(){console.log('bbb'),false}); </script>
鼠标点击，同时执行以上两个，操作。第三个参数：默认就是false，false：冒泡模型；true：捕捉模型
3.作用域示例
var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++){ // i=0,i=1,i=2 myTrs[i].onmouseover = function(){ this.style.backgroundColor = "red"; // myTrs[i].style.backgroundColor = "red"; // 为什么这里必须用this，不能用myTrs[i]？ 因为作用域不同，js是以函数作为作用域的 }; }
