js的DOM（文档对象模型）获取节点

最新推荐文章于 2022-05-18 22:41:50 发布
最新推荐文章于 2022-05-18 22:41:50 发布
阅读量2k 收藏 4
点赞数
分类专栏： Javascript 文章标签： dom javascript document
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiren_99/article/details/47843745
版权

认识DOM

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

先来看看下面代码:

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

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

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

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

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

节点属性:

遍历节点树:

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

DOM操作:

注意:前两个是document方法。

getElementsByName()方法

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

语法：

document.getElementsByName(name)

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

注意:

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

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

例子：获取节点长度

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
  var mynode=document.getElementsByName("myt")  ;  
  alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">

<br />
<input type="button" οnclick="getnum()" value="看看有几项？" />
</body>
</html>

输出为6

getElementsByTagName()方法

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

语法:

getElementsByTagName(Tagname)

说明:

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

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

例子：通过id获取h1，通过nam获取sex的元素，通过标签名获取input 

<!DOCTYPE HTML>
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>JavaScript</title>  
</head>  
<body>  
    
        <form name="Input">
            <table align="center" width="500px" height="50%" border="1">
                <tr>
                    <td align="center" width="100px">
                        学号:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" id=userid name="user" οnblur="validate();">
                        <div id=usermsg></div>
                    </td>
                </tr>
                <tr>
                    <td align="center" width="100px">
                        姓名:
                    </td>
                        <td align="center">
                        <input type="text" name="name">
                    </td>
                </tr>
                <tr>
                    <td align="center" width="%45">
                        性别:
                    </td>
                    <td align="center">
                        <input type="radio" name="sex" value="男">
                        男
                        <input type="radio" name="sex" value="女">
                        女
                    </td>
                </tr>
                <tr>
                    <td align="center" width="30%">
                        年龄:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" name="age">
                    </td>
                </tr>
                <tr>
                    <td align="center" width="100px">
                        地址:
                    </td>
                    <td align="center" width="300px">
                        <input type="text" name="addr">
                    </td>
                </tr>

            </table>
        </form>
        <h1 id="myHead" οnclick="getValue()">
            看看三种获取节点的方法?
        </h1>
        <p>
            点击标题弹出它的值。
        </p>
        <input type="button" οnclick="getElements()"
            value="看看name为sex的节点有几个?" />
        <Br>
        <input type="button" οnclick="getTagElements()"
            value="看看标签名为input的节点有几个?" />
            
     <script type="text/javascript">
         function getValue()
          {
           var myH=document.getElementById("myHead");
              alert(myH.innerHTML)
          }
          function getElements()
          {
              var myS=document.getElementsByName("sex");
              alert(myS.length);
          }

          function getTagElements()
          {
              var myI=document.getElementsByTagName("input");
              alert(myI.length);
          }
         
     </script>        

    </body>
</html>

区别getElementByID,getElementsByName,getElementsByTagName

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

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

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

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

例子：获取复选框 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>无标题文档</title>
    </head>
    
    <body>
        <form>
          请选择你爱好:<br>
          <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">  跑步 <br>
          <input type="button" value = "全选" onclick = "checkall();">
          <input type="button" value = "全不选" onclick = "clearall();">
          <p>请输入您要选择爱好的序号，序号为1-6:</p>
          <input id="wb" name="wb" type="text" >
          <input name="ok" type="button" value="确定" onclick = "checkone();">
        </form>
        <script type="text/javascript">
        function checkall(){
            var hobby = document.getElementsByTagName("input");
          for(var i=0;i<hobby.length;i++) {
            if(hobby[i].type=="checkbox"){
                hobby[i].checked=true;
            }
          }
        }
        function clearall(){
            var hobby = document.getElementsByName("hobby");
            
        for(var i=0;i<hobby.length;i++) {
            if(hobby[i].type=="checkbox"){
                hobby[i].checked=false;
            }
          }   
            
        }
        
        function checkone(){
            var j=document.getElementById("wb").value; 
           var hobby=document.getElementById("hobby"+j);
                hobby.checked=true;
        
        }
        
        </script>
    </body>
</html>

getAttribute()方法

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

语法：

elementNode.getAttribute(name)

说明:

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

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

例子： 使用getAttribute()方法，获取LI标签的title值。 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>   
<p id="intro">课程列表</p>  
    <ul>  
        <li title="第1个li">HTML</li>  
        <li>CSS</li>  
        <li title="第3个li">JavaScript</li>  
        <li title="第4个li">Jquery</li>  
        <li>Html5</li>  
    </ul>  
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
    var con=document.getElementsByTagName("li");
    for (var i=0; i< con.length;i++){
       var text=con[i].getAttribute("title");
      if(text!=null)
      {
        document.write(text+"<br>");
      }
    } 
 </script> 
</body>
</html>

setAttribute()方法

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

语法：

elementNode.setAttribute(name,value)

说明：

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

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

注意：

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

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

例子： 使用 getAttribute ()方法获取元素属性值，保存在变量text 。使用setAttribute()方法设置title属性值 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
  <p id="intro">我的课程</p>  
  <ul>  
    <li title="JS">JavaScript</li>  
    <li title="JQ">JQuery</li>  
    <li title="">HTML/CSS</li>  
    <li title="JAVA">JAVA</li>  
    <li title="">PHP</li>  
  </ul>  
  <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
  var Lists=document.getElementsByTagName("li");
  for (var i=0; i<Lists.length;i++)
  { 
    var text=Lists[i].getAttribute("title");
    document.write(text +"<br>");
    if(text=="")
    {
      Lists[i].setAttribute("title","WEB前端技术")
    document.write(Lists[i].getAttribute("title")+"<br>");
    }
  }
</script>
</body>
</html>










_米粒儿_
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js知识整理(四)----Dom对象获取节点的方法
Apple_Andy的博客
06-20 450
1.什么是DOM对象 全称是：Document Object Model, 即：文档对象模型，它定义了操作文档对象的接口 2.DOM节点分类node (1)结点的概念 在DOM模型中，整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容 (2)结点的类型 元素结点、文本结点和属性结点 <font id=“font1” color=“red”>hello DOM!</font> //font:元素结点 //id,color:属性结点 //hello DOM! :文本节点
JS入门笔记：获取文档对象
m0_52021758的博客
02-06 216
DOM获取元素的方法 1.getElementById(参数) a.参数为元素的id，并且是字符串形式 b.返回的是一个元素对象 c.使用console.dir()打印获取的元素可以更好的察看其相关属性和方法 2.根据标签名来获取元素：getElementsByTagName() a.因为一个HTML中有很多相同的标签，所有返回的是对象的集合，以伪数组的形式存储 b.得到的元素是动态的，动态即当标签内容改变时，js获取的对象内容会自动改变 c.如果页面中没有此元素，则返回一个空的伪数组 d.获取父元素里的子
DOM(文档对象模型节点）
share_free的博客
03-06 719
DOM(文档对象模型节点） 节点类型NodeTypeNamed ConstantnodeName的返回值nodeValue的返回值Element1ELEMENT_NODEelement namenullAttr2ATTRIBUTE_NODE属性的名称属性值Text3TEXT_NODE#text文本内容 jQuery的基本选择器底层就是js的由document调用的getElementsByName
JS Dom 文档操作对象 Document
qq_42938246的博客
09-26 213
======= JS Dom 文档操作对象 Document 优先级：在JS中，正常的优先级，从上往下执行。因此如果是在head里面 要获取/设置body里面的标签属性，这是做不到的，所以在的通常情况下，我们会script代码放到body后面。 但是，放入body后面可能不便于阅读，因此有2种方式可以解决这个问题： 1、window.onload 会在页面或图像加载完成后立即发生。稍快 2、do...
JS——文档对像模型DOM
culous的博客
09-17 623
什么是dom？ dom不是javascript，dom是文档。 dom是一组用来描述脚本怎么与结构化文档进行交互和访问的web标准。 dom定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式以及行为。 dom可以说就是为了获得对象而存在的。 如果你有其他的方法，你就可以替代dom的作用。节点根据DOM，HTML文档中的每个成分都是一个节点。 DOM是这样规定的：
文档对象模型DOM通俗讲解
09-04
文档对象模型（DOM）是Web开发中的一个关键概念，它为HTML和XML文档提供了一个结构化的表示，并允许程序和脚本动态地访问和更新文档内容、结构和样式。DOM是独立于语言的标准，这意味着任何支持DOM的编程语言都可以...
常用手册 DOM文档对象模型.chm
05-25
DOM文档对象模型允许开发人员通过JavaScript或其他脚本语言与HTML或XML文档进行交互，例如添加、删除或修改文档元素。这个模型将整个文档视为一棵树，每个节点代表文档的一部分，如元素、属性、文本等。在DOM中，...
Dom文档对象模型-2010版
06-17
DOM将网页或XML文档视为一个可编程的对象树，允许开发人员通过JavaScript或其他脚本语言对文档内容进行创建、访问和修改。2010版的DOM规范可能包含了对早期版本的改进和更新，以适应不断发展的Web技术需求。 DOM的...
DOM文档对象模型
05-29
以下是对DOM文档对象模型的详细解释： 1. **DOM树结构**：在DOM中，文档被视为一棵倒置的树，根节点是整个文档，而叶节点通常是文本内容。每个元素都是一个节点，可以有子节点，包括其他元素、文本或注释。通过遍历...
JS学习笔记(02)——节点对象
偶是大禹的博客
10-17 1003
window对象
js之文档对象模型
qq_45030966的博客
09-06 155
目录 Node类型 Node类型的属性 Node类型的方法 Document类型 Document类型属性 Document类型方法 Element类型 Element类型属性 Text类型 Comment类型 注释类型 DOM是针对HTML对XML文档的API，DOM描绘一个层次化的节点数，允许开发人员添加，移除，修改页面的某一部分。 Node类型 JavaScript中所有的节点类型都继承自Node类型，所有的节点类型...
DOM学习笔记---遍历页面所有元素节点
beinlife的博客
10-25 2232
//遍历页面所有元素节点 var blanks=[]; function getChildren(parent){   console.log(blanks.join("")+"|_"+(parent.nodeType==1?parent.nodeName:parent.nodeValue));   if(parent.children.length>0){     blanks.pus
Document对象
了凡
04-07 601
Document对象document.writeln()将内容添加到HTML文档的末尾。document.write()类似，但不会给添加到文档里的字符串附上行结束字符。 document.URL属性返回当前文档的URL。获取文档信息 属性 说明 返回 characterSet 返回文档的字符集编码，是一个只读属性 字符串 charset 获取或设置文档的字符串编码
文档对象的获取
weixin_34415923的博客
03-18 88
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 class="abc">h...
Dom文档对象模型
m0_69674158的博客
05-18 314
一、DOM操作 DOM：文档对象模型，是基于文档编程的一套API接口 1.DOM操作分类 使用JavaScript操作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM 2.节点和节点关系 DOM是以树状结构的HTML文档，根据DOM概念，HTML文档中的每个标签或元素都是一个节点。 整个文档是一个文档节点 每个HTML标签是一个元素节点 包含在HTML元素中的文本是文本节点 每个HTML属性是一个属性节点 注释属于注释节点 使用父（parent）、子（child）和同胞
DOM 文档对象模型
langmanboy的博客
04-12 779
DOM 文档对象模型 1. Web API 的概念 api：应用程序接口。是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能 Web API：是 Web 的应用程序编程接口，浏览器 API 可以扩展 Web 浏览器的功能，服务器 API 可以扩展 Web 服务器的功能 js 组成：ECMAScript、DOM、BOM ECMAScript：定义了 JavaScript 的语法规范 BOM：浏览器对象模型，提供用于处理文档之外的所有内容的其他对象 DOM：文档对象模型，提供用于处理文档的对象 2
DOM（文档对象模型）
木羊的专栏
04-29 2033
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。 DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合，三种常见的DOM节点: 1. 元素节点：上图中、、等都是元素节点，即标签。 2
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值