认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

先来看看下面代码:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM</title>

</head>

<body>

  <h2><a href=http://www.yztcedu.com>javascript DOM</a></h2>

  <p>对HTML元素进行操作，可添加、改变或移除CSS样式</p>

  <ul>

	 <li>JavaScript</li>

      <li>DOM</li>

	 <li>CSS</li>

   </ul>

</body>

</html>

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.yztcedu.com"。

节点属性:

遍历节点树:

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

看看下面的代码:

运行结果:

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称，如p、a、img等标签名。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

看看下面代码，通过getElementsByTagName()获取节点。

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

把上面的例子转换到HTML中，如下:

<input type="checkbox" name="hobby" id="hobby1">  音乐

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

方法总结如下:

注意：方法区分大小写

通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:

<input type="checkbox" name="hobby" id="hobby1">  音乐

<input type="checkbox" name="hobby" id="hobby2">  登山

<input type="checkbox" name="hobby" id="hobby3">  游泳

<input type="checkbox" name="hobby" id="hobby4">  阅读

<input type="checkbox" name="hobby" id="hobby5">  打球

<input type="checkbox" name="hobby" id="hobby6">  跑步

<input type="button" value = "全选" id="button1">

<input type="button" value = "全不选" id="button1">

1. document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。

2. document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。

3. document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。

getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

看看下面的代码，获取h1标签的属性值：

运行结果:

h1标签的ID ：alink
h1标签的title ：getAttribute()获取标签的属值

setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意：

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

希望对你有帮助！！！！

　　

认识DOM（上）的更多相关文章

  1. Visual Event ：快速查看 DOM 上绑定的 JS 事件

    http://web.jobbole.com/82503/ Javascript中的事件经常被认为如谜一般不可解.Javascript是一个事件驱动的语言,在这样的前提下前面的看法是很奇怪,但是说到它 ...

  2. D3.js学习笔记（二）——使用绑定在DOM上的数据

    简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYP ...

  3. D3.js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

  4. Jquery获取dom上的绑定事件

    在1.8.0版本之前的写法: $.data(domObj,'events');//或者$('selector').data('events') 1.8.0及以后的写法: $._data(domObj, ...

  5. Jquery 查看DOM上绑定的事件列表

    $(dom).data( "events" ); 包括事件类型和关联的处理函数 下面是firefox的截图

  6. Vue2 异步获取的数据(通过ajax)获取的数据 渲染到dom上

    页面dom结构如下 <ul class="user" id="app"> <li><span>姓名: </span&g ...

  7. javascript系列-class9.DOM(上)

    欢迎加入前端交流群交流知识获取视频资料:749539640 1.文档对象模型DOM(document Object Model)        所谓DOM就是以家族的形式描述HTML       节点 ...

  8. vue自定义公共组件components||在vue中，解决修改后的数据不能渲染到dom上的bug

    //主页面框架用来嵌入:Main.vue <el-col :span="24" > * { margin: 0; padding: 0; } html { width: ...

  9. （Vue中）cehart在同一个dom上画图图切换时饼图有折线图的坐标系

    网上都是别人转载的,下面是转载的代码,在Vue中根本不适用 var echartrunningstate = null; if (echartrunningstate && echar ...

  10. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

随机推荐

  1. Scrapy 教程(四)-命令

    scrapy 没有界面,需要命令行来操作. 非常简单,总共也就十四五个命令,分为全局命令和项目命令. 全局命令 在哪都能用 常用命令 scrapy startproject name 创建项目/工程 ...

  2. TApplication，TForm，TControl，TComponent，TWinControl研究（博客索引）good

    TApplication,TForm,TControl,TComponent,TWinControl研究 http://blog.csdn.net/suiyunonghen/article/detai ...

  3. html5酷炫效果链接收集

    HTML5 3D图片相册图片轮播动画   http://www.html5tricks.com/demo/html5-3d-gallery-animation/index.html 36种漂亮的CSS ...

  4. ThinkPHP中的"路由"是什么意思?

    路由(route)是指根据url, 分配到对应的处理程序的映射. 简单来说,就是一个路径的解析,根据客户端提交的路径,将请求解析到相应的模块/控制器/方法上. 转载自:https://blog.csd ...

  5. CPU与GPU，我们应该使用哪个?

    CPU与GPU,我们应该使用哪个? CPU与GPU CPU即中央处理器,GPU即图形处理器. 两者的相同之处:两者都有总线和外界联系,有自己的缓存体系,以及数字和逻辑运算单元 两者的区别之处:在于存在 ...

  6. Spring基础17——使用注解来配置Bean

    1.组件扫描 组件扫描(component scanning):Spring能够从classpath下自动扫描,侦测和实例化具有特定的注解的组件. 特定组件包括: —@Component:基本注解,标 ...

  7. PAT Basic 1027 打印沙漏 (20 分)

    本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐:相邻两 ...

  8. JS比较两个时间的时间差

    /** * 比较两个时间的时间差 * @param startTime 开始时间 * @param endTime 结束时间 * @demo compareTime(new Date('2019-12 ...

  9. [跨界思考|瑞典|IKEA]有意思的宜家|IKEA

    来自北欧瑞典的IKEA无疑是成功的企业.根据我最近几天的去宜家的体验和来自网上的资料,我发现IKEA不止是成功的企业,而且可以说是一家独特又伟大的公司. 说到IKEA,就不得不说下它的创始人:坎普拉德 ...

  10. VS2017报错：未提供初始值设定项

    今天在使用VS2017写程序时,报错: 出错的代码如下: #include "pch.h" #include <iostream> #include <threa ...