1.DOM对象简介：

  1. 什么是DOM:(Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

　　  2.DOM HTML 节点树：指的是DOM中为操作HTML文档提供的属性和方法，其中，文档(Document)表示HTML文件，文档当中HTML标签称之为元素(Element),文档当中所有内容称之为节点(Node)。因此HTML文件可以看成是所有元素组成的节点树，元素与元素之间有级别划分。

　　  3.关系图解：

  1. 根节点：图中的<html>标签是整个文档的根节点(有且只有一个)。
  2. 子节点：指的是文档中某个节点的下一级节点，例如，图中 <head> 和 <body> 节点是 <html> 节点的子节点。
  3. 父节点：指的是文档中某个节点的上一级节点，例如，图中 <html> 元素是 <head> 和 <body> 的父节点。
  4. 兄弟节点：两个节点同属于一个父节点，例如，图中<a>和<h1>标签互为兄弟几点。

2.HTML元素操作：

  1. 根据指定ID获取指定DOM元素(推荐使用)：例如获取ID为btn的按钮：

    <!DOCTYPE html>
    
<html lang="zh">
    
<head>
    
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    <title>Document</title>
    
</head>
    
<body>
    
    <!--按钮-->
    
    <button id="btn"></button>
    
    <script type="text/javascript">
    
        var btn = document.getElementById("btn");
    
        console.log(btn);
    
    </script>
    
</body>
    
</html>
  2. 根据clas类名获取DOM元素：例如获取class名为.header的元素： 
    <!DOCTYPE html>
    
<html lang="zh">
    
<head>
    
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    <title>Document</title>
    
</head>
    
<body>
    
    <nav class="header">

    </nav>
    
    <script type="text/javascript">
    
        var header = document.getElementsByClassName('header');
    
        console.log(header);
    
    </script>
    
</body>
    
</html>

    说明：因为类名是可以重复的 所以获取的时候要注意，如果需要指定获取是某一个类可以根据索引来操作 例如获取页面class名为itms的第二个<li>标签代码如下：

    <!DOCTYPE html>
    
<html lang="zh">
    
<head>
    
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    <title>Document</title>
    
</head>
    
<body>
    
    <ul>
    
        <li class="itms"><a href="">我是第1个li</a></li>
    
        <li class="itms"><a href="">我是第2个li</a></li>
    
        <li class="itms"><a href="">我是第3个li</a></li>
    
        <li class="itms"><a href="">我是第4个li</a></li>
    
    </ul>
    
    <script type="text/javascript">
    
        /*
    
         *    需求：根据类名获取第2个li标
    
         * */
    
        //var li0 = document.getElementsByClassName('itms'); //这里是 class名为itms的集合
    
        //console.log(li0);//注意这里是获取文档中所有类名为 itms 的标签
    
        var li02 = document.getElementsByClassName('itms')[1];// 后面加上标签的索引即可
    
        console.log(li02);
    
    </script>
    
</body>
    
</html>
  3. 根据标签名获取指定DOM元素(几乎不用)： 
    <!DOCTYPE html>
    
<html lang="zh">
    
<head>
    
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    <title>Document</title>
    
</head>
    
<body>
    
    <div></div>
    
    <p></p>
    
    <p></p>
    
    <script type="text/javascript">
    
    //获取页面所有的div标签
    
    var getDiv = document.getElementsByTagName('div');
    
    console.log(getDiv);
    
    //获取页面中所有的p标签
    
    var getP = document.getElementsByTagName('p');
    
    console.log(getP);
    
    </script>
    
</body>
    
</html>
  4. 根据元素的name属性获取元素：

    <!DOCTYPE html>
    
<html lang="zh">
    
<head>
    
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    <title>Document</title>
    
</head>
    
<body>

    <label for="">请输入密码：</label>
    
    <input type="text" name="search" id="" value="" />
    
    <script type="text/javascript">
    
        //获取属性名(name)为search的标签
    
        var search = document.getElementsByName('search');
    
        console.log(search);
    
    </script>
    
</body>
    
</html>

JavaScript操作DOM的更多相关文章

  1. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  2. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  3. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  4. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  5. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  6. 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...

  7. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  8. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  9. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  10. 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象

    一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM    Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...

随机推荐

  1. jquery获取元素对应高度

    https://www.cnblogs.com/sntetwt/p/3823592.html 获取点击元素距离页面的高度 $(select).offset().top - $(document).sc ...

  2. hiho week 136（二分＋优先队列）

    题目链接:http://hihocoder.com/contest/hiho136/problem/1 题意:中文题诶- 思路:直接对缓存区长度二分就好了,注意计算当前长度的"延迟惩罚值&q ...

  3. linux mysql 简单记录

    mysql 1.linux下启动mysql的命令:mysqladmin start/ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysql的命令: ...

  4. [Xcode 实际操作]七、文件与数据-(7 )使用UserDefaults检测App是否首次运行

    目录:[Swift]Xcode实际操作 本文将演示UserDefaults的使用,它常被用于存储程序的配置数据. 当关闭程序之后,再次打开程序时,之前存储的数据依然可以从UserDefaults里读取 ...

  5. python接口测试框架遇到的坑（一）excel数字转文本

    一.遇到的问题 python编写接口测试框架中,接口用例使用excel维护,其中预期值(code码的值)20000和实际值总是不一致,后来通过打印type发现一个是unicode,一个是float. ...

  6. Python学习笔记（socket）

    socket(数据传输接口) 搭建服务端 1.导入模块 import socket 2.创建socket对象 sock=socket .socket(socket_family,socket_topy ...

  7. 黑马旅游网 解析url查询字符串

    function getUrlParam(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)( ...

  8. JS高级学习历程-3

    JS-作用域链及作用 [作用域链] 1 什么事作用域链 一个变量,在当前环境可以使用,当前环境的内部环境也可以使用,内部的深层环境...也可以使用,变量在不同环境都可以使用的现象想成了一个链条,称为“ ...

  9. Table 自定义设置边框线

    table上添加:border-collapse: collapse;//设置表格边框分开显示就可以设置tr td的边框线

  10. Djano调试工具debug-toolbar

    Djano调试工具debug-toolbar   django-debug-toolbar 调试工具使用文档 安装 pip install django-debug-toolbar 配置 在setti ...