JavaScript_Dom对象全实例讲解

一．简单介绍
Dom是W3C-万维网联盟的标准，它定义了访问HTML和XML文档的标准。W3C文档对象模型（DOM）是中立与平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式的。
W3C将DOM分为3个不同的部分:
1.核心DOM:针对任何结构化文档的标准模型；
2.XML DOM部分：针对XML文档的标准模型；
3.HTML DOM部分:针对HTML文档的标准模型；
XML DOM:定义了所有XML元素的对象和属性及访问它们的方法；
HTML DOM:定义了所有HTML元素的对象和属性及访问它们的方法；
二．DOM节点
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点（NODE），分为5种节点类型：
1.整个文档是一个文档节点(document对象),每个html页面整体;
2.每个HTML元素是元素节点(element对象)，页面中的每个标签；
3.HTML元素内的文本是文本节点(text对象)；
4.每个HTML中属性是属性节点(attribute对象)；
5.注释是注释的节点(comment对象)；
如下图所示:

2.1节点属性(自身属性):
1.attribute-节点(元素)的属性节点；
2.nodeType-节点类型；
3.nodeValue-节点值；
4.nodeName-节点名称；
5.innerHTML-节点(元素)的文本值；
2.2导航属性:-定位到元素的方法
1.parentnode-节点(元素)的父节点
2.firstChild-节点下的第一个子元素；
3.lastChild-节点下的最后一个元素；
4.childNodes-节点(元素)的子节点
推荐使用:
5.parentElement-父节点标签元素
6.Children-所有子标签
7.firstElementChild-第一个子标签元素
8.lastElementChild-最后一个子标签元素
9.nextElementSibling-下一个兄弟标签元素
10.previousElementSibling-上一个兄弟标签元素
实例代码:

    
    



UserName
PassWord
爱好:音乐电影
性别: 

2.3 如何找到HTML中的任意element节点
常用属性
1.getElementsByClassName()-支持全局和局部查找(得到的是数组)
2.getElementsByName()-只支持全局查找(得到的是数组)
3.getElementsByTagName()-支持全局和局部查找(得到的是数组)
4.etElementById()-只支持全局查找
例如:

    
    



UserName
PassWord
爱好:音乐电影
性别: 

2.4子节点、父节点、同胞(兄弟)节点简述
每个节点均有且只有一个父节点(根节点除外)；
每个节点可以含有多个子节点；
每个节点可以有多个兄弟节点；
三．Event 事件
1.事件分类
HTML 4.0之后的的新增一大特性就是有能力使HTML事件去触发浏览器中的动作，例如:点击某一HTML标签时触发某一功能(JavaScript函数)。常见的属相列表如下图所示(这些属性可以插入HTML标签来自定义动作事件):
onclick：当用户点击某个对象时触发某一事件(调用某一句柄)；
ondblclick:当用户双击某一对象时触发某一事件(调用某一句柄)；
onfocus:获取元素焦点时触发某一事件
onblur:失去元素焦点时触发某一事件

onchange：域的内容被改变
onkeydown:某个键盘被按下时触发某一事件；
onkeypress：某个键盘按键被按下并松开时触发某一事件；
onkeyup:某个键盘按键被松开；
onload：一张页面或者一幅图像加载完成时触发某一事件；
onload属性在开发中一般只给body添加，该属性的触发标志着页面被加载完成。应用场景:当有些事件我们希望页面加载完成之后才执行，就可以使用该属性。
onmousedown:鼠标按钮被按下时触发某一事件；
onmousemove:鼠标按钮被移动时触发某一事件；
onmouseout:鼠标从某元素移开时触发某一事件；
onmouseover:鼠标移到某元素之上时触发某一事件；
onmouseleave:鼠标从元素离开时触发某一事件；
onselect：文本被选中时触发的某一事件；
onsubmit：点击’确认’按钮时触发某一事件；
onsubmit事件是当表单在进行提交时触发，该属性也只能给form表单使用。应用场景:在表单进行提交到后端之前前端进行相关的校验(例如:格式校验)，若校验通过则提交前端数据到后端，否则返回一个false或者使用event事件的preventDefault()函数,两种方式都会阻止表单的提交。(即:onsubmit事件在提交数据到后端之前触发，注意优先级)
实例代码:(需求:提交表单之前，前端验证name是否为关键字name,年龄是否小于0,有一者不满足则不提交数据到后端)
代码如下:

2.事件绑定方式
JavaScript中时间绑定方式分为两种:1是通过在HTML标签中进行绑定事件；2是在JavaScript中先找到需要绑定事件的对象，再去实现其对应的事件。如下图所示：
方式1：

    
    



    

        
一
        
二
        
三
        
四
        

             span标签
        
    

此时有两点不好的地方:1是例中多个p标签点击时都是触发相同的事件，此时按照方式1来完成需要在每个p标签后面写相同重复的代码；2是结构和行为未完全分离，不利于后期的维护；
方式2：

    
    



    

        
一
        
二
        
三
        
四
        

             span标签
        
    

3.this关键字的用法
格式:函数名(this);
作用:实例中点击span标签的this 标签汉子时，就可以获取当前点击标签的内容。即:this关键字可以获取本标签的自身信息，以方便通过它来获取与之相关的标签信息。
实例代码：

    
    



    

        
一
        
二
        
三
        
四
         this标签
        

             span标签
        
    

效果图：

4.Event对象
Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。时间通常是和函数结合使用的，函数不会再时间触发前被执行。Event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数，我们获取只需要仅仅接收一下即可。
比如:onkeydown，我们想知道哪个按钮被按下了，只需要通过event对象的属性就可以，这时可通过event的KeyCode属性，例如:

5.事件传播
所谓事件传播是指，我们给元素A定义了一个事件a,给元素B定义了一个事件b，但是元素B有包含于元素A中或者两者之间有交集的部分定义了事件，此时执行交集中的事件既会执行事件a又会执行事件b，也就是说A元素的事件a传播到了B元素中了，此时难免不符合需求，如何解决，以下面例子说明。例如:

    
    
    


    
outer
        
inner
    

四．DOM节点的增删改查
1.增加节点
需求:每点击一次增加一个p标签节点，如下图所示:

代码块如下:

    
    
    
    



    
addjavascript test1
    
javascript test2
    
javascript test3
    
javascript test4

2.删除节点
需求:每点击一次删除一个p标签，从第一个开始删起；
代码块如下:

    
    
    
    



    
addjavascript test1
    
javascript test2
    
javascript test3
    
removejavascript test4

3.修改节点
需求：点击replace，若test3标签存在则将其更改成img标签，否则进行弹框提示；
效果图如下:

代码块如下:

    
    
    



    
addjavascript test1
    
replacejavascript test2
    
javascript test3
    
removejavascript test4

4.查询对应的节点
4.1 getElementsByClassName(“classname”):结果为列表
4.2 getElementsByName(“name”):结果为列表
4.3 getElementsByTagName(“TagName”):结果为列表
4.4 getElementById(“id”)
五．DOM节点属性的设置
1.改变HTML内容
改变元素内容最简单的方法是使用innerHTML、innerText
注意innerHTML、innerText方法的区别:innerHTML添加的将会是一个HTML的效果，而innerText只是一个text文字类型的效果，如下图：

代码块如下:

    
    
    



    
姓名
    
性别

2.更改CSS样式
思路:
2.1 找到需要操作的标签element；
2.2 使用element.style.css=”修改后的值”方法进行修改
代码块如下:

    
    
    



    
姓名
    
性别

效果图如下:

3.设置(改变)HTML属性
方法1:element.attribute = value
方法2:element.setAttribute(attribute,value)
实例代码如下:

4.获取HTML属性值
方法:element.getAttribute(attributename)
实例代码如下；

5.创建新的HTML元素(标签)
方法:document.createElement("tagname")
实例代码如下:

6.删除已有的HTML元素(标签)
方法：element.removeChild(removetag)
实例代码如下；

    
    
    



    
删除
    
    

7.Class的相关操作
1.element.className：获取该class所有值,结果为字符串类型；
2.element.classList[index]:获取第几个class值,index超出边界则为undefined；
3.element.classList.add("addclassname")：增加class值；
4.element.classList.remove("deleteclassname"):删除class值，有则删除无则略过不报错；
实例代码如下:

    
    
    



    
DIV标签