DOM基础总结

阅读量：6265 次

发布时间：2019-06-22

本文共 7356 字，大约阅读时间需要 24 分钟。

一、简介

1、什么是DOM

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

2、DOM结构

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

树中所有的框都是节点，文本也是一个节点

包括：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。这是一个初学者的易错点。

二、查找DOM对象

1、直接查找

getElementById() 返回对拥有指定 id 的第一个对象的引用。

getElementsByName() 返回带有指定名称的对象集合。

getElementsByTagName() 返回带有指定标签名的对象集合。

2、间接查找

　　获得节点node,包含所有类型的node节点。

parentNode          // 父节点childNodes          // 所有子节点firstChild          // 第一个子节点lastChild           // 最后一个子节点nextSibling         // 下一个兄弟节点previousSibling     // 上一个兄弟节点

　　获得元素element，仅包含element标签元素的节点。

parentElement           // 父节点标签元素children                // 所有子标签firstElementChild       // 第一个子标签元素lastElementChild        // 最后一个子标签元素nextElementtSibling     // 下一个兄弟标签元素previousElementSibling  // 上一个兄弟标签元素

　　一个例子说明上面两种方法的区别


     
           文本    
      123

3、操作DOM对象

1、文本操作

innerText 　　　　 //所有的纯文本内容，包括子标签中的文本

innerHTML 　　　　//所有子节点(包括元素、注释和文本节点)

outerHTML 　　　　//返回自身节点与所有子节点

value 　　　　　　//表单元素的值

例子

DOM元素取值操作

正常标签span

文本输入样例组

文本输入框：

密码框：

多行文本输入：

选择样例组

篮球

足球

排球

人妖

表单类的value和checked操作

运行结果

2、attrbute属性操作

attributes                // 获取所有标签属性setAttribute(key,value)   // 设置标签属性getAttribute(key)         // 获取指定标签属性 /*var atr = document.createAttribute("class");atr.nodeValue="democlass";document.getElementById('n1').setAttributeNode(atr);*/

3、class类操作

className                // 获取所有类名 classList　　　　　　　　　//获取所有类的列表classList.remove(cls)    // 删除指定类classList.add(cls)       // 添加类

    
          Title    
      
       cangsong

class类操作

4、标签操作

　　a.创建标签

// 方式一var tag = document.createElement('a')tag.innerText = "wupeiqi"tag.className = "c1"tag.href = "http://www.cnblogs.com/wupeiqi" // 方式二var tag = "wupeiqi"

　　b、操作标签

// 方式一var obj = "";xxx.insertAdjacentHTML("beforeEnd",obj);xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二var tag = document.createElement('a')xxx.appendChild(tag)xxx.insertBefore(tag,xxx[1])

5、style样式操作

style.cssText			//可对style中的代码进行读写style.item()			//返回给定位置的CSS属性的名称style.length			//style代码块中参数个数style.getPropertyValue()	//返回给定属性的字符串值style.getPropertyPriority()	//检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串style.removeProperty()		//删除指定属性style.setProperty()		//设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"

    
           Title    
       
        style test

View Code

6、提交表单

document.geElementById('form').submit()

7、位置相关

document.documentElement.offsetHeight    　　//全文文档总高度document.documentElement.clientHeight    　　//浏览器可视区域高度。（随着窗口大小变化）tag.offsetHeight                            //tag自身高度（height + padding + border）tag.offsetTop                                //距离上级标签定位高度tag.clientHeight                            //tag可视区域：height + paddingtag.clientTop                                //tag的border高度tag.scrollHeight                            //tag全文文档高度（height + padding）tag.scrollTop                                //tag已滚动高度(随滚动变化)tag.offsetParent　　　　　　　　　　　　　　　　　//tag相对偏移的父级标签元素

View Code

    
              返回顶部
          
               
        返回顶部    
       
    
               
        本实例知识点：
            
        1、 οnscrοll="gotop()"要要用在监听的元素上。本例为body边标签。
            
        2、document.body.scrollTop监听离元素滚轮顶部的距离。
            
        3、 a href="javascript:void(0)"，使得点击a标签不刷新页面。
            
        4、返回顶部设置document.body.scrollTop=0

返回顶部样例

固定左侧菜单栏

（接固定菜单往下做）

固定菜单的同时，随内容滚动目录

8、定时器

setInterval         //多次定时器（毫秒计时），第一次不立即执行clearInterval    　 //清除多次定时器setTimeout        　//单次定时器clearTimeout    　　//清除单次定时器

    
          Title

定时器样例

9、弹出框

console.log            　　//输出框alert                       //弹出框confirm                    //确认框

    
          Title

弹出框测试样例

10.localtion

location.href = "url"	获取URL重定向location.assign("http://www.cnblogs.com/suoning")		重定向到URLlocation.search = "wd=suoning"		修改查询字符串(百度搜索)location.hostname		服务主机名，例：www.cnblogs.comlocation.pathname		路径，例：suoninglocation.port			端口号location.reload()		重新加载

11、其他BOM相关

navigator        包含有关浏览器的信息screen            包含有关客户端显示屏幕的信息history            包含用户(在浏览器窗口中)访问过的 URLwindow.print();    显示打印对话框

//后退一页history.go(-1)//前进一页history.go(1);//前进两页history.go(2);//无参数时，刷新当前页面history.go()//后退一页history.back()//前进一页history.forward()

history相关方法

4、DOM事件

对于事件需要注意的要点：

this

event

事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

搜索框

    
               Tab菜单实例
           
                
                     
                      
          title1
            
          title2
            
          title3
        
         
    
        
    
                
                     
          本例知识点：
            
          1/οnclick="show(this)" this特质本元素。
            
          2、classList.remove('active') 移除class中的active，用于class操作
            
          3、ths.className获取class名，设置值直接ths.className="active"
            
          3、tag.getAttribute("content")获取tag标签中：“content"属性的值。标题和内容关联用标签值来关联。
            
          4、max-height:500px;最大高度min-height:100px;最小高度
            
          content1
            
          content1
            
          content1
            
          content1
            
          content1
        
         
        
         
          content2
         
        
         
          content3