DOM 对象

Yance9

已于 2022-04-15 02:39:17 修改

阅读量480

点赞数

文章标签： html

于 2022-04-15 02:38:45 首次发布

本文链接：https://blog.csdn.net/weixin_51576225/article/details/124185389

版权

文章目录

一、HTML DOM 节点
二、Document对象
三、元素对象
四、属性对象
五、事件对象
六、案例（西游记人物介绍）

一、HTML DOM 节点

在 HTML DOM (Document Object Model) 中, 每个东西都是节点 :

文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点

二、Document对象

当浏览器载入 HTML 文档, 它就会成为 document 对象。
document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

下面列举常用的一些方法和属性

方法	说明
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.getElementsByTagName()	返回带有指定标类名的对象集合。(不支持IE8以下版本）

属性	说明
document.images	返回对文档中所有Image对象引用
document.forms	返回对文档中所有From对象引用
document.body	返回文档的body元素
document.documentElement	返回文档中的html元素
document.cookie	返回与当前文档有关的所有 cookie

HTML5新增的document对象方法
HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll()。

querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。
querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。

//获取匹配到的第1个div
console.log(document.querySelector('div')) 
//获取id为box的第1个div
console.log(document.querySelector('#box'))  
///获取class为bar的第1个div     
divconsole.log(document.querySelector('.bar'))
//获取含有name属性的第1个
console.log(document.querySelector('div[name]'))
///获取class为bar的div     
divconsole.log(document.querySelectorAll('.bar'))
//获取所有div
console.log(document.querySelectorAll('div'))

三、元素对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象的子节点可以是, 可以是元素节点，文本节点，注释节点。
NodeList对象代表了节点列表，类似于 HTML元素的子节点集合。
下面列举常用的元素对象的方法和属性

方法	说明
element.appendChild()	为元素添加一个新的子元素
element.getElementsByTagName()	返回指定标签名的所有子元素集合。
element.insertBefore()	现有的子元素之前插入一个新的子元素
element.removeChild()	删除一个子元素
element.replaceChild()	替换一个子元素
element.toString()	将一个元素转换成字符串
element.addEventListener()	向指定元素添加事件句柄

属性	说明
element.childNodes	返回元素的一个子节点的数组
element.clientHeight	在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth	在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
element.firstChild	返回元素的第一个子节点
element.innerHTML	设置或者返回元素的内容。
element.lastChild	返回的最后一个子元素
element.offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
element.offsetTop	返回当前元素的相对垂直偏移位置的偏移容器
element.scrollHeight	返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollWidth	返回元素的整个宽度（包括带滚动条的隐蔽的地方）
element.scrollLeft	返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop	返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离

四、属性对象

在 HTML DOM 中, Attr 对象代表一个 HTML属性。
HTML属性总是属于HTML元素。

属性	说明
attr.value	设置或者返回属性值
attr.firstChild	返回属性的第一个子节点
attr.childNodes	返回函数的所有节点

五、事件对象

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。
事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

鼠标事件

属性	说明
onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双击某个对象时调用的事件句柄
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmouseup	鼠标按键被松开

键盘事件

属性	说明
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

表单事件

属性	说明
onblur	元素失去焦点
onchange	域的内容被改变
onfocus	元素获得焦点
onreset	重置按钮被点击
onselect	文本被选中
onsubmit	确认按钮被点击

事件对象

静态表量	描述
CAPTURING-PHASE	当前事件阶段为捕获阶段(3)
AT-TARGET	当前事件是目标阶段,在评估目标事件(1)
BUBBLING-PHASE	当前的事件为冒泡阶段 (2)

属性	说明
bubbles	返回布尔值，指示事件是否是起泡事件类型
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作
currentTarget	返回其事件监听器触发该事件的元素
eventPhase	返回事件传播的当前阶段
target	返回触发此事件的元素（事件的目标节点）
timeStamp	返回事件生成的日期和时间
type	返回当前 Event 对象表示的事件的名称

方法	说明
initEvent()	初始化新创建的 Event 对象的属性
preventDefault()	通知浏览器不要执行与事件关联的默认动作
stopPropagation()	不再派发事件

目标事件对象

方法	说明
addEventListener()	允许在目标事件中注册监听事件(IE8 = attachEvent())
dispatchEvent()	允许发送事件到监听器上 (IE8 = fireEvent())
removeEventListener()	运行一次注册在事件目标上的监听事件(IE8 = detachEvent())

事件监听对象

方法	说明
handleEvent()	把任意对象注册为事件处理程序

鼠标/键盘事件对象

属性	说明
altKey	返回当事件被触发时，“ALT” 是否被按下
button	返回当事件被触发时，哪个鼠标按钮被点击
clientX	返回当事件被触发时，鼠标指针的水平坐标
clientY	返回当事件被触发时，鼠标指针的垂直坐标
ctrlKey	返回当事件被触发时，“CTRL” 键是否被按下
keyIdentifier	返回按键的标识符
keyLocation	返回按键在设备上的位置
metaKey	返回当事件被触发时，“meta” 键是否被按下
relatedTarget	返回与事件的目标节点相关的节点
screenX	返回当某个事件被触发时，鼠标指针的水平坐标
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标
shiftKey	返回当事件被触发时，“SHIFT” 键是否被按下。

六、案例（西游记人物介绍）

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 404px;
        margin: 10px;
        border: 1px solid #ccc;
        border-top: 1px solid #206F96;
        margin: 0 auto;
        box-shadow: 8px 8px 8px rgba(0,0,0,0.125);
    }
    .head {
        height: 31px;
    }
    .head-div {
        width: 100px;
        height: 30px;
        float: left;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background-color: #206e96;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        color: #fff;
    }
    .head .current {
        background-color: #fff;
        border-bottom: 1px solid #fff;
        color: #000;
    }
    .main-div {
        display: none;
        margin: 20px 10px;
    }
    .main .current {
        display: block;
    }
</style>

<script>
    window.onload = function () {
        var heads = document.getElementsByClassName('head-div')
        var mains = document.getElementsByClassName('main-div');
        for (var i = 0; i < heads.length; ++i) { 
            heads[i].onmouseover = function () { 
                for (var i = 0; i < mains.length; ++i) { 
                    if (heads[i] == this) { 
                        mains[i].classList.add('current');
                        heads[i].classList.add('current');
                    } else { 
                        mains[i].classList.remove('current');
                        heads[i].classList.remove('current');
                    }
                }
            }
        }
    }
</script>

<body>
    <div class="box">
        <div class="head">
            <div class="head-div current">唐僧</div>
            <div class="head-div">孙悟空</div>
            <div class="head-div">猪八戒</div>
            <div class="head-div ">沙和尚</div>
        </div>
        <div class="main">
            <div class="main-div current">
                法名玄奘，唐朝第一高僧，所以被人们称为唐僧。西行取经时，唐朝太宗皇帝李世民赐法名三藏。
                唐僧十八岁出家皈依佛门，经常青灯夜读，对佛家经典研修不断，而且悟性极高，二十来岁便名冠中国佛教，倍受唐朝太宗皇帝厚爱。
                后来被如来佛祖暗中选中去西天取经，并赐宝物三件，即袈裟、九环锡杖、金箍咒。唐僧身材高大，举止文雅、性情和善，佛经造诣极高。
                他西行取经遇到九九八十一难，始终痴心不改，在孙悟空、猪八戒、沙和尚的辅佐下，历尽千辛万苦，终于从西天雷音寺取回三十五部真经，为弘扬佛家教化做出了巨大贡献，至今被人们津津乐道，不忘他的历史功绩。
            </div>
            <div class="main-div">
                法号行者，是唐僧的大徒弟，会七十二变、腾云驾雾。一双火眼金睛，能看穿妖魔鬼怪伪装的伎俩；一个筋斗能翻十万八千里；使用的兵器如意金箍棒，能大能小，随心变化，小到绣花针，大到顶天立地。
                他占花果山为王，自称齐天大圣，搅乱王母娘娘的蟠桃胜会，偷吃太上老君的长生不老金丹，打败天宫十万天兵天将，又自不量力地与如来佛祖斗法，被压在五行山下五百多年。
                后来经观世音菩萨点化，保护唐僧西天取经，三打白骨精，收服红孩儿，熄灭火焰山，一路上降魔斗妖，历经九九八十一难，取回真经终成正果。他嫉恶如仇，不怕困难，坚韧不拔，英勇无畏，取经后被封为斗战胜佛。
            </div>
            <div class="main-div">
                法号悟能，是唐僧的二徒弟，原来是玉皇大帝的天蓬元帅，因调戏嫦娥被逐出天界，到人间投胎，却又错投猪胎，嘴脸与猪相似。他会变身术，能腾云驾雾，使用的兵器是九齿钉钯。
                唐僧西去取经路过云栈洞，猪八戒被孙悟空收服，八戒从此成为孙悟空的好帮手，一同保护唐僧西天取经。八戒性格温和，憨厚单纯，力气大，但又好吃懒做，爱占小便宜，贪图女色，经常被妖怪的美色所迷，难分敌我。
                他对师兄的话言听计从，对师父忠心耿耿，为唐僧西天取经立下汗马功劳，是个被人们喜爱同情的喜剧人物。
            </div>
            <div class="main-div">
                法名悟净，原是天宫玉帝的卷帘大将，因触犯天条，被贬出天界，在人间流沙河兴风作浪。他使用的兵器是一柄月牙铲，武艺高强，不畏强敌。
                经南海观世音菩萨点化，拜唐僧为师，与孙悟空、猪八戒一起保护唐僧西天取经。他身上有两件宝，一件是菩萨葫芦，一件是九个骷髅组成的项圈。
                后来，他用九个骷髅作为九宫，把菩萨葫芦安放在其中，成为法船，稳似轻舟，顺利地帮助师徒四人渡河西去。沙和尚保护唐僧西天取经路上，任劳任怨，忠心不二，取经后被封为金身罗汉。
            </div>
        </div>
    </div>
</body>

</html>