JavaScript之dom操作详解编程语言

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM编程： DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应

1.domcument.getElementById()

  参数为id名，通过获取标签的id直接获取到标签对象，不存在则返回null

2.domcument.getElementsByClassName()

  参数为class名，返回所有为该class名的标签集合

3.domcument.getElementsByTagName()

  参数为标签名，返回所有该标签名的数组。

4.domcument.getElementsByName()

  参数为name属性，返回所有name属性名所在标签数组

间接选择器

如果我们把html文档对象中的每一个标签看作是一个节点，那么就节点关系可分为：父节点、子节点、兄弟节点，每个节点常用属性有：nodeName(节点名)、nodeType(节点类型)、nodeValue(节点值)。

nodeName

nodeName 属性含有某个节点的名称。

* 元素节点的 nodeName 是标签名称
* 属性节点的 nodeName 是属性名称
* 文本节点的 nodeName 永远是 #text
* 文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的.

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的,可使用innerHtml或者innerText代替

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：
元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

 body 

 input id="a1" value="hehe" 这里是一个input /input 

 script 

 var tag=document.getElementById(a1); 

 document.write(节点名字:+tag.nodeName)//节点名 

 document.write(节点类型:+tag.nodeType)//节点类型为1 

 document.write(节点值:+tag.nodeValue)//节点值null，类型为1是元素类型，value不可用 

 /script 

 /body 

间接选择器主要方法：

parentNode // 父节点 

childNodes // 所有子节点 

firstChild // 第一个子节点 

lastChild // 最后一个子节点 

nextSibling // 下一个兄弟节点 

previousSibling // 上一个兄弟节点 

parentElement // 父节点标签元素 

children // 所有子标签 

firstElementChild // 第一个子标签元素 

lastElementChild // 最后一个子标签元素 

nextElementtSibling // 下一个兄弟标签元素 

previousElementSibling // 上一个兄弟标签元素

 

2、classList

当标签的class属性有多个时候，obj.classList为返回标签的class数组，通过obj.classList.add()、obj.classList.remove()设置样式，还有length等方法。

 head 

 meta charset="UTF-8" 

 title Title /title 

 style 

 .c1{ 

 background-color: aqua; 

 .c2{ border: 1px solid darkgreen; 

 /style 

 /head 

 body 

 div id="a1" onclick="show();" 来了 /div 

 script 

 function show() { 

 var tag=document.getElementById(a1); 

 tag.classList.add(c1,c2);//添加样式 

 // tag.classList.remove(c1,c2);//移除样式 

 /script 

 /body 

 内容文本操作 1、innerText

获取标签中所有文本内容

 body 

 div id="a1" 

 a 百度 /a 

 /div 

 script 

 var tag=document.getElementById(a1); 

 console.log(tag.innerText)//输出文本内容为“搜狗 百度” 

 tag.innerText="你好 wd"//设置文本内容 

 /script 

 /body 

2、innerHTML

获取标签内的全部内容包括标签，可设置标签

 body 

 div id="a1" 

 a 百度 /a span wd /span 

 /div 

 script 

 var tag=document.getElementById(a1); 

 console.log(tag.innerHTML)//输出"搜狗 a 百度 /a span wd" 

 tag.innerHTML=" a href=www.baidu.com 百度 /a "//设置标签中内容为a标签 

 /script 

 /body 

3、value

获取和设置value属性值，对于input、select、textarea等系列生效，特别的select标签具有selectIndex属性也可设置value值。

 body 

 input id="a1" type="text" value="点我" onclick="func();" 

 script 

 function func() { 

 var tag=document.getElementById(a1); 

 tag.value=随便; 

 /script 

 /body 

div input id="a1" type="text" onblur="moveOut()" value="请输入关键字" onfocus="Func();" /div script function Func() { var tag=document.getElementById("a1") if (tag.value=="请输入关键字"){ tag.value=""; function moveOut() { var tag=document.getElementById("a1") if (tag.value.length=="") tag.value="请输入关键字"; //oblur是光标移出事件 onfocus光标获取事件 /script /body
var tag=" a href=www.baidu.com 百度 /a ";//创建标签字符串 document.getElementById("a1").insertAdjacentHTML("beforeEnd",tag);//添加标签到html中 /script 方式二：通过document.createElement( 标签名 )方法创建

 body 

 div id="a1" 

 /div 

 /body 

 script 

 var tag=document.createElement(input);//创建标签 

 tag.setAttribute(type,text);//设置属性 

 tag.style.color=red;//设置样式 

 var p=document.createElement(p);//创建P标签 

 p.appendChild(tag);//将input标签包裹在p标签之中 

 document.getElementById(a1).appendChild(p)//添加p标签到html中 

 /script 

添加标签到html中方法

1.obj.insertAdjacentHTML(position,htmlcontext)

参数position共四个，htmlcontext为字符串形式的html

tps： beforeBegin（找到的标签开始之上） 、 afterBegin（找到的标签开始之下） 、 beforeEnd（找到标签的结束之前） 、 afterEnd（找到的标签的结束之后）

2.obj.appendChild（newchild）

添加obj的子标签，参数为标签对象。

 

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

 

 

dom事件绑定

dom绑定事件方式：

dom0：通过html标签绑定事件

示例：

 div id="a1" 你好 /div 

 script 

function AddColor() { 

 var tag=document.getElementById(a1); 

 tag.style.color="red"; 

 /script 

 dom1:在javascript代码中进行绑定

语法为：
elementObject.onXXX=function(){
    // 事件处理代码
}

 示例：

 body 

 div id="a1" 你好 /div 

 script 

 var tag=document.getElementById(a1); 

 tag.onclick=function () { 

 this.style.color=red; 

 console.log(11); 

 /script 

 /body 

 利用监听函数绑（addEventListener() 或 attachEvent()）定事件

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

 

eventName 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
useCapture 事件捕获模型，Boolean类型（true/flase），是否使用捕获，一般用flase ,false表示冒泡方式（从html文档内部向外部进行绑定），ture表示是捕捉模式，从html文档外部向内部进行绑定。

 

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

eventName 事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
clearInterval(obj) ：取消定时器 setTimeout（function，times）：单次定时器，用完与setInterval完全一样，可用于消息提示，过会消失。 clearTimeout（obj）：清除单次定时器