前端开发-DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一查找元素

1.1直接查找

1 document.getElementById             根据ID获取一个标签
2 document.getElementsByName          根据name属性获取标签集合
3 document.getElementsByClassName     根据class属性获取标签集合
4 document.getElementsByTagName       根据标签名获取标签集合

1.2间接查找

 1 parentNode          // 父节点
 2 childNodes          // 所有子节点
 3 firstChild          // 第一个子节点
 4 lastChild           // 最后一个子节点
 5 nextSibling         // 下一个兄弟节点
 6 previousSibling     // 上一个兄弟节点
 7  
 8 parentElement           // 父节点标签元素
 9 children                // 所有子标签
10 firstElementChild       // 第一个子标签元素
11 lastElementChild        // 最后一个子标签元素
12 nextElementtSibling     // 下一个兄弟标签元素
13 previousElementSibling  // 上一个兄弟标签元素

二、操作

2.1内容

1 innerText   仅仅文本   自动过滤内部标签
2 outerText
3 innerHTML   HTML内容：包含文本和内本的浅表
4 innerHTML  
5 value       值   input标签 文本框中的内容
　　　　　　　　　　　select    选中的值 还有一个特有的selectindex
　　　　　　　　　　　textarea

    <input id="i1" type="text" onfocus="fecus()" onblur="blu()"  value="请输入关键字"><div>onfocus 也适用于tab键</div><div style="color: red"><input type="text" placeholder="请输入关键字">这种做法在目前只适合最新版本的浏览器，so目前推荐上面js的做法</div><script>function fecus(){var tag = document.getElementById('i1');var val = tag.value;if(val=="请输入关键字"){tag.value='';}}function blu() {var tag = document.getElementById('i1');var val = tag.value;if(val.length==0){tag.value='请输入关键字';}}</script>

搜索框实现例子

2.2 样式操作

　　增加与删除样式

　　　　obj.className

　　　　obj.classList

　　　　　　classList.add()

　　　　　　classList.remove()

　　设置样式的属性

　　　　obj.style.color='red';

　　　　obj.style.fontSize='16px';

2.3 属性操作

　　获取属性　　　　

　　　　obj.attributes
　　　　NamedNodeMap {0: id, 1: type, 2: onfocus, 3: onblur, 4: value, 5: class, 6: style, length: 7}

　　添加属性

　　　　obj.setAttribute('id','id1')

　　删除属性

　　　　obj.removeAttribute('id')

2.4 创建标签并添加到指定位置

　　创建标签有两种方法：1.通过字符串的方法 2.通过dom来穿件

　　　　　　ps：jqure中并不具有创建标签的办法，so这里需要掌握！

<script>function addEle1() {var tag = '<p><input type="text" </p>';document.getElementById('i3').insertAdjacentHTML("beforeEnd",tag);}function addEle2() {var tag=document.createElement('input');tag.setAttribute('type','text')tag.style.color='red';tag.style.border='black 1px solid'var p=document.createElement('p');p.appendChild(tag);document.getElementById('i3').appendChild(p)}</script>

两种创建标签的办法

2.5 实现表单的提交

　　在html中需要使用 form中的 <input type='submit'> 来实现

　　在dom中，任何标签都可以显示表单的提交

2.6 其他操作

 1 　　alert　　　　　　　　　　弹出消息
 2 　　console.log　　　　　　　在浏览器调试模式下输出
 3 　　confirm('真的要删除吗')      弹框确定
 4 //url操作
 5     location.href        获取当前网址
 6     location.href=' '   重定向
 7     location.reload()  页面刷新
 8 
 9 //定时器
10     setInterval（‘fuction’,5000）     一直在执行
11     clearIterval( obj)               清除setInterval对象
12     setTimeout（‘fuction’，5000）  　　只执行一次，5s之后再执行
13                             qq邮箱删除邮件，就使用了该技术
14     clearTimeout（obj）                与上个一样

    <div id="i1"></div><input type="button" onclick="settime()" value="删除"><script>function settime(){document.getElementById('i1').innerText='已删除';setTimeout(function () {document.getElementById('i1').innerText='';},5000)}</script>