JavaScript操作DOM

1.DOM对象简介：

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

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

　　 3.关系图解：

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

2.HTML元素操作：

根据指定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>

根据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>

根据标签名获取指定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>

根据元素的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的更多相关文章

JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
javaScript操作DOM对象（看三遍，敲三遍，写三遍！不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
你所不了解的javascript操作DOM的细节知识点(一)
你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...
JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象
一.DOM操作分类使用JavaScript操作DOM时通常分为三类:DOM Core.HTMl--DOM和CSS-DOM 二.访问节点节点属性三.节点信息四.操作节点的属性语法: ge ...

随机推荐

ZOJ2868【折半】
题意: 把一堆数分成两堆,使得两堆的差值最小. 思路: 先把一堆数分成两堆,然后用个set存一堆的所有组合,枚举第一堆的状态,二分查找第二堆接近half_value. 瞎说时间复杂度:O(2^17*3 ...
Untiy ShaderLab 随手记录
最基本形式 (先不考虑Fog) Shader "Nafio/TUnlit"{ Properties { _MainTex("TT",2D) = "wh ...
solidity 学习笔记（3）函数修饰符/继承
修饰符: 函数修饰符有 constant view pure 其中 constant和view的功能是一样的不会消耗gas 也就是说不会做任何存储 constant在5.0以后的版本中被废弃 ...
Spring配置文件xsi:schemaLocation无法解析导致启动失败的解决方案
今天遇到过情况,spring的配置文件在本地读取没有问题,扔到线上服务器运行就报无法解析xml,找了很久问题,发现是因为线上服务器无法上网,导致无法下载相关的xsd文件,没办法不能上网就只有使用本地的 ...
$("body").animate({"scrollTop":top})无效的问题
问题我在个人站点的左下角和右下角各自使用了如下代码来将页面滚动到顶部和底部: $("body").animate({scrollTop:0},800); $("body ...
NET Core Hosting
ASP.NET Core 运行原理解剖[1]:Hosting ASP.NET Core 是新一代的 ASP.NET,第一次出现时代号为 ASP.NET vNext,后来命名为ASP.NET 5,随 ...
064 Minimum Path Sum 最小路径和
给定一个只含非负整数的 m x n 网格,找到一条从左上角到右下角的可以使数字之和最小的路径.注意: 每次只能向下或者向右移动一步.示例 1:[[1,3,1], [1,5,1], [4,2,1]]根据 ...
.net 中 Json 与List 相互转
var duanxin1 = new DuanXin(); duanxin1.RECEIVE_LOGIN_NAME = "dd"; duanxin1.RECEIVE_Number ...
JAVA基础之Date类、DateFormat类及Calendar类
个人理解: 关于Date类,进行截取或者转换时一定要注意好数据类型,long类型后面要加上L.时间的原点是1970年.用DateFormat则完成日期与文本之间的转换,特别注意的是:月是用M,时是用H ...
zuul忽略表达式
如果有error过滤器,会进入error

JavaScript操作DOM

JavaScript操作DOM的更多相关文章

随机推荐

热门专题