认识DOM（上）
认识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（上）的更多相关文章
- Visual Event ：快速查看 DOM 上绑定的 JS 事件
http://web.jobbole.com/82503/ Javascript中的事件经常被认为如谜一般不可解.Javascript是一个事件驱动的语言,在这样的前提下前面的看法是很奇怪,但是说到它 ...
- D3.js学习笔记（二）——使用绑定在DOM上的数据
简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYP ...
- D3.js学习笔记（一）——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...
- Jquery获取dom上的绑定事件
在1.8.0版本之前的写法: $.data(domObj,'events');//或者$('selector').data('events') 1.8.0及以后的写法: $._data(domObj, ...
- Jquery 查看DOM上绑定的事件列表
$(dom).data( "events" ); 包括事件类型和关联的处理函数 下面是firefox的截图
- Vue2 异步获取的数据(通过ajax)获取的数据 渲染到dom上
页面dom结构如下 <ul class="user" id="app"> <li><span>姓名: </span&g ...
- javascript系列-class9.DOM(上)
欢迎加入前端交流群交流知识获取视频资料:749539640 1.文档对象模型DOM(document Object Model) 所谓DOM就是以家族的形式描述HTML 节点 ...
- vue自定义公共组件components||在vue中，解决修改后的数据不能渲染到dom上的bug
//主页面框架用来嵌入:Main.vue <el-col :span="24" > * { margin: 0; padding: 0; } html { width: ...
- （Vue中）cehart在同一个dom上画图图切换时饼图有折线图的坐标系
网上都是别人转载的,下面是转载的代码,在Vue中根本不适用 var echartrunningstate = null; if (echartrunningstate && echar ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
随机推荐
- Excel如何通过关键字模糊匹配查找全称
打开excel,以其素材为例,通过关键字模糊匹配查找全称. 在公司名下输入公式:=LOOKUP(1,0/FIND(D2,A2:A5),A2:A5),按回车键确定即可. FIND(D2,A2:A ...
- makeinfo - 翻译 Texinfo 文档
SYNOPSIS 总览 makeinfo [OPTION]... TEXINFO-FILE... DESCRIPTION 描述 将 Texinfo 源文档翻译为各种其他格式,默认是可以用 Emacs ...
- Thinkphp5 手册
thinkphp5 手册 https://www.kancloud.cn/manual/thinkphp5/118003
- 第二节，下载openwrt源码和编译环境
文章的开始先说两个重点 1.不要使用root用户编译,普通用户编译即可. 2.自行搭建梯子,以免编译失败. 一,进入虚拟机内的Ubuntu系统 点击左下角的显示应用程序,我们去修改一下Ubuntu的源 ...
- 费用流+SPFA ||Luogu P3381【模板】最小费用最大流
题面:[模板]最小费用最大流 代码: #include<cstdio> #include<cstring> #include<iostream> #include& ...
- Set 的合集 并集 差集
合集 ,,,,,,]; ,,]; function union() { //先将数组去重 let s1 = new Set(arr1); let s2 = new Set(arr2); //[...s ...
- CTF Jarvisoj Web(session.upload_progress.name php 上传进度)
Jarvisoj Web 题目地址:http://web.jarvisoj.com:32784/index.php <?php //A webshell is wait for you ini_ ...
- Java_环境变量
介绍 第一步:下载JDK 第二步:搭建环境,双击JDK安装程序 第三步:配置环境变量 第四步:检查JDK安装是否成功 介绍: .java 源文件 我们所编写的代码都在这个文件中 .class 字节码文 ...
- 【NOIP2016提高A组模拟7.17】锦标赛
题目 403机房最近决定举行一场锦标赛.锦标赛共有N个人参加,共进行N-1轮.第一轮随机挑选两名选手进行决斗,胜者进入下一轮的比赛,第二轮到第N-1轮再每轮随机挑选1名选手与上一轮胜利的选手决斗,最后 ...
- delphi 10.3 控件遮挡 webbrowser
听闻10.3的新特性之一,webbrowser可以被其他控件遮挡, 在等待10.3.1出来后才开始来尝鲜, 但在webbrowser上添加控件后, 发现控件还是被挡住了, 研究发现需要将控件的cont ...