1.HTML中DOM对象的概念

HTML Document Object Model(文档对象模型)
HTML DOM定义了访问和操作HTML文档的标准方法
HTML DOM把HTML文档呈现为带有元素,属性和文本的树结构(节点树)

2.DOM树

如图所示:

展示文档中各对象之间的关系,用于对象的导航

3.DOM节点

3.1 节点类型

HTML文档中的每个成分都是一个节点

DOM的规范:

整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点

如图所示:

3.2 节点关系

节点树中的节点彼此拥有层级关系

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系,

父节点拥有子节点,同级的子节点被称为同胞(兄弟或姐妹)

在节点树中,顶端节点被称为根(root)
每个节点都有父节点,除了根,根没有父节点
一个节点可以拥有任意数量的子节点
同胞是拥有相同父节点的节点

下图的图片展示了节点树的一部分,以及节点之间的关系

访问HTML元素(节点),访问HTML元素等同于访问节点,可以以不同的方式来访问HTML元素

3.3 节点查找

document.getElementById("id_name")              //根据id号查找节点
document.getElementsByTagName("tag_name") //根据标签名查找节点
document.getElementsByClassName("class_name") //根据类名查找节点
document.getElementsByName("name") //根据标签名称查找节点

实例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div class="first_div">
<div id="second_div">
<p class="p1">1111</p>
<p class="p2">2222</p>
<p class="p3">3333</p>
</div>
</div>
</div>
<script>
var ele1=document.getElementsByTagName("p");
console.log(ele1);
</script>
</body>
</html>

查找代码中所有的"p"标签:

var ele1=document.getElementsByTagName("p");
console.log(ele1);

查找结果如下:

查找代码中类名为"first_div"的标签:

var ele1=document.getElementsByClassName("first_div");
console.log(ele1);

查找结果如下:

查找代码中名为"p1"的标签:

var ele1=document.getElementsByName("p1");
console.log(ele1);

查找结果如下:

查找代码中id为"second_div"的标签:

var ele1=document.getElementById("second_div");
console.log(ele1);

查找结果如下:

3.4 导航节点的属性

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

需要注意的是,javascript中没有办法一次性找到所有的兄弟标签

只能先找到父标签,再根据父标签的子标签来查找兄弟标签

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div class="father_div">
<div id="first_div">first div</div>
<div id="second_div">
<p class="p1" name="p1">1111</p>
<p class="p2">2222</p>
<p class="p3" name="p3">3333</p>
</div>
<div id="third_div">third div</div>
<div id="fourth_div">fourth div</div>
</div>
</div>
<script>
var ele1=document.getElementById("second_div");
console.log(ele1);
</script>
</body>
</html>

节点树的关系如图所示:

导航节点用法如下:

//取得"second_div"这个标签
var ele1=document.getElementById("second_div");
console.log(ele1); //取得"second_div"标签的父节点,即"father_div"
var ele2=ele1.parentElement;
console.log(ele2); //根据上面找到的"father_div",查找其所有的子标签
var ele3=ele2.children;
console.log(ele3); //根据"second_div"标签查找其第一个子标签,即"p1"节点
var ele4=ele1.firstElementChild;
console.log(ele4); //根据"second_div"标签查找其最后一个子标签,即"p3"标签
var ele5=ele1.lastElementChild;
console.log(ele5); //根据"second_div"查找上一个兄弟标签,即"first_div"节点
var ele6=ele1.nextElementSibling;
console.log(ele6); //根据"second_div"查找下一个兄弟标签,即"third_div"节点
var ele7=ele1.previousElementSibling;
console.log(ele7);

上面代码的查找结果如下:

想根据"second_div"标签找到"fourth_div"标签,代码如下:

//找到"second_div"这个标签
var ele1=document.getElementById("second_div"); //根据"second_div"这个标签找到父标签,即"father_div"
var ele2=ele1.parentElement; //根据"father_div"标签找到最后一个子标签,即"fourth_div"标签
var ele3=ele2.lastElementChild;
console.log(ele3);

查找结果如下:

3.5 导航节点属性设置

div标签:

var ele1 = document.getElementById("div1");
ele1.className = "div1"; # 为标签设置class名为:div1
ele1.style.color = "red"; # 为标签设置颜色为:red
ele1.style.background = "blue"; # 为标签设置背景颜色为:blue
ele1.style.fontSize = "20px;" # 为标签设置字体大小为:30px
ele1.title = "aaaa"; # 为标签设置title属性为:aaa
ele1.innerHTML(); # 读写div标签包括的内容
ele1.innerHTML="aaa"; # 设置div标签所包括的内容
ele1.innerHTML="<a href='www.baidu.com'>百度</a>"; # 设置div标签的内容为a标签

a标签:

var ele2 = document.getElementById("link");
ele2.href = "www.baidu.com"; # 为a标签设置href属性
ele2.title = "百度"; # 为a标签设置title属性
var attr = "background"; # 定义attr变量为:background属性
ele2.style[attr] = "red"; # 为标签设置attr变量的样式,即background属性为:red
ele2["style"][attr] = "red"; # 为标签设置attr变量的样式,即background属性为:red

javascipt中的DOM对象的更多相关文章

  1. 在OCX初始化时获取其在网页中的DOM对象

    OCX初始化的时候会调用SetClientSite,会传入IOleClientSite对象. CComQIPtr<IOleControlSite, &IID_IOleControlSit ...

  2. js中的DOM对象 和 jQuery对象 比较

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  3. js中的DOM对象和jQuery对象的比较

    1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...

  4. Jquery-获取iframe中的dom对象

    父窗口中操作iframe: $(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作父窗 ...

  5. jquery获取iframe中的dom对象

    父窗口中操作iframe:$(window.frames["iframeChild"].document)    //假如iframe的id为iframeChild 在子窗口中操作 ...

  6. JS中的DOM对象及JS对document对像的操作

    DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...

  7. JS中的DOM对象

    DOM对象 1. DOM树 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),通过 HTML DOM对象,可访问 JavaScript HTML 文档的所有 ...

  8. JavaScipt中对DOM的理解

    一.理解DOM 浏览器通过文档对象模型DOM使JavaScript程序可以访问页面上的元素,而DOM是页面上XHTML中文档正文标题.段落.列表.样式ID.class以及所有其他出现的数据的一个内部表 ...

  9. vue方法中传递dom对象示例

    <div id="app"> <input type="text" v-on:keyup="onlyNum($event)" ...

随机推荐

  1. JavaScript数组forEach()、map()、reduce()方法

    1.  js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.  forEac ...

  2. bzoj:4762: 最小集合

    原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4762 mark一下,有空要好好弄懂 #include<cstdio> #inc ...

  3. BZOJ 3098: Hash Killer II(新生必做的水题)

    3098: Hash Killer II Time Limit: 5 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 1555  Solved: ...

  4. 线段树入门HDU_1754

    题目链接:点击打开链接 I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  5. flume1.8 开发指南学习感悟

    概述: Apache Flume是一个分布式.可用的系统,用于从许多不同的sources有效的收集并移动大量日志数据用于集中存储数据. 架构及数据流动模型: flume实际上就是一个Agent.Age ...

  6. Win10下安装RabbitMQ以及基本知识学习

    一.为什么选择RabbitMQ?      先说一下场景,这是我们公司遇到,当然我这里不做业务评价哈?虽然我知道他很不合理,但是我是无能为力的.APP端部分注册是Java开发的系统,然后业务端是C#开 ...

  7. 对python-rrdtool模块的浅研究。

    一,python-rrdtool模块安装. 切记!!! 这个rrdtool模块,在windows环境下安装太费劲,就是因为没安装上所以现在改成了在ubuntu环境下开发,原来没有体会过,现在可真是体会 ...

  8. 怎样实现给DEDE的栏目增加栏目图片(1)

    http://www.genban.org/news/dedecms-7577.html 前两天用DEDE做二次开发的时候,遇到一个问题,领导让给每个栏目增加一个栏目图片的功能,网上找了些东西,结合自 ...

  9. Eclipse配置maven环境

    一.什么是maven? Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个 ...

  10. phpcms v9——工作需要【套模板】

    phpcms v9 模板标签说明整理 作者:匿名 来源:ChinaZ源码报导 浏览:44061次 2011-6-17 15:52:09 字号:大 中 小 [摘要]本文介绍phpcms v9中模板标签使 ...