什么是DOM

1:文档对象模型(DocumentObjectModel,DOM)

2:DOM定义了访问和操作HTML文档的标准方法。

3:DOM将HTML 文档表达为树结构。

其他查询元素的方法:

  document.querySelector(" ")  //获取元素

                 .表达根据类查找

                 #表示根据id查找

                 直接写表示根据标签名查找

                 [name = 值]表示根据某一个属性查找

document.querySelectorAll(" ")        // 获取元素集合(就算页面上只有一个元素,取出的也是集合)

eval(" ")   // 通过id名称获取元素

直接通过id名获取元素(部分IE不支持)

修改元素:

  元素(节点)是不能直接修改的,可以先删除,再创建。

对某元素的各种属性修改,比如:

  div1.innerHTML= "新的内容"; //演示innerText和outerHTML

  input1.value = "新的内容";

  input.type = "button";  //将input1元素的类型改为按钮

  span1.style.color = "red";

document.createElement(elementName);

指再文档下创建某个标签,elementName指标签名,如div,ul,li,img,a等等

element1.appendChild(element2);

指将element2元素,放入element1元素的内容,以追加的形式存放。

删除某元素:

ul1、removeChild(li3);  // 在ul1元素内,移除li3元素

注意:

  1:只在子节点下删除,想删除哪个节点,必须找到该节点的父节点,parentNode即父节点。

  2:只能删除1个节点,不能直接删除集合。

  3:如果用变量保存一个集合,对集合内的某个元素进行修改后,

    该变量存储的元素会发生变化。比如:

    var arr=document.getElementsByTagName("div");

    document.body.removeChid(arr[0]); //代码执行完,arr里面所有的元素都会向前进一位

  // 即原来的arr[1]由arr[0]表示。

DOM :自定义属性: 元素上有些是系统默认就含有的属性,比如id、title、name、style等。

  自定义的属性: 有些是根据自己喜好定义出来的属性,比如abc、xxx等。

          自定义属性通常来做数据存储。(可理解成变量赋值)。

  html:

    <div id= "div1" a="123" data-b="hello"></div>

  解释:在上文代码中,id是div的自带属性,a和b都是自定义属性,其中a是旧的写法,b是新的写法。

html:

  <div id="div1" a= "123" data-b = "hello"></div>

操作属性的方法有很多种,不同的方法对应的是不同类型的属性。

最常用的写法:

  div.c = "你好";  //设置属性

  console.log(div.c); //获取属性

注:使用这种方法获取自定义属性时,必须使用js的方法设置属性,使用html的方法设置是无法获取的。

html:

  <div id = "div1" a = "123" data-b = "hello"> </div>

另一种比较常用的写法:

  div1.setAttribute("d","你好");   //设置属性

  console.log(div1.getAttribute("d")); //获取属性

注: 使用这种方法设置的自定义属性,其内容会自动转为字符串。

html:

 <div id= "div1" a="123" data-b = "hello" ></div>

 自定义属性中的新的写法:

  div1.dataset.a = "你好"; //设置属性

  console.log(div1.dataset.e); //获取属性

注:有些浏览器不支持。

html:

  <div id="div1" a= "123" data-b = "hello"></div>

 存在,但不推荐的写法:

  div1.attribute.f = "你好"; /设置属性

  console.log(div1.attributes.f); //获取属性

不推荐使用,了解即可,因为使用比较复杂。

1,如果直接在html中写行间属性,通过该方法获取时返回属性节点。

2,如果即在行间设置了属性,也通过了js设置了属性,获取时返回属性节点。

3,如果没在行间设置属性,仅在js设置了属性,获取时返回数据。

如果是系统默认就含有的属性,通过不同方法设置的属性,可以通过不用的方法获取。

如果是根据自己喜好定义出来的属性,不用的方法设置的,是不能通过不同方法获取的。

例如: 用setAttribute设置后,可以用attributes获取,但用attributes设置,不能用getAttribute获取;

在实际开发中,以.这种方法为主,除非有要求说要在html中保存属性,否则我们不采用其他方法。

真实开发中,如果html中已经存在了自定义属性,需要我们通过js拿到自定义属性,看这个属性是怎么定义的,如果没有data前缀,则用getAttribute,否则用dataset。

div1.aa = [1,2,3];

console.log(div1,aa); //[1,2,3];

div1.setAttribute("aa",[1,2,3]);

console.log(div1.getAttribute("aa")); // "1,2,3"

区别 :

  1: 用 .aa 方法设置后,如果设置一个数组,能够取出数组,而setAttribute设置的是.toSring() 后的结果。

  2:用 .aa方法设置后,html上看不到,而setAttribute是能够看到的。

DOM的基本操作的更多相关文章

  1. JS基础---Dom的基本操作

    DOM的增删改查 增: 1.创建一个元素节点 document.createElement() 创建新的<p> 元素:var para=document.createElement(&qu ...

  2. JavsScript中DOM的基本操作

    节点及其类型 元素节点 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在 html 文档的什么位置编写 js 代码 直接在 html 页面 ...

  3. JQuery Dom的基本操作

     这是赋值 $("#test").val ("aaa"); 这是取值 string s = $("#test").val (); text( ...

  4. js学习总结:DOM节点二(dom基本操作)

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

  5. Js杂谈-DOM

    前言 对jQuery的依赖.导致js的原生方法的淡忘,如果是封装自己的库,那势必要用到js的许多原生方法.从Jquery强大的dom处理开始,我们开始回顾javascript那些古老而坚挺的DOM方法 ...

  6. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  7. JavaScript基础学习(九)—DOM

    一.DOM概述      DOM(Document Object Model)文本对象模型.      D: 文档,HTML文档或XML文档.      O: 对象,document对象的属性和方法. ...

  8. BOM及DOM及事件

    知识内容: 1.BOM介绍 2.DOM操作 3.事件 参考:http://www.cnblogs.com/liwenzhou/p/8011504.html 入门代码(DOM基本操作与事件): < ...

  9. 一篇文章搞懂DOM

    学习JavaScript肯定是会遇到DOM操作,那么什么是DOM?它又是干嘛用的?这篇文章为你揭晓答案. DOM是document object model的缩写,简称文档对象模型. 简单的说DOM是 ...

随机推荐

  1. mybatis的xml映射文件

    1,在进行统计查询时候,不想写映射的实体类,这时候设置返回的resultType类型是map <select id="getMap" resultType="jav ...

  2. js如何获得局部变量的值

    方法一: <script> var a; //全局变量 function test(){ var b=20; //局部变量   return b; //返回局部变量的值 }; a=test ...

  3. 【Odoo 8开发教程】第二章:Odoo生产环境部署设置

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/10792977.html 一:dbfilter 数据库访问规则设置 一个odoo实例可以连接到不同的数据库实例中 ...

  4. rocketmq 多master集群部署

    rocketmq  并且编译下载 wget http://mirror.bit.edu.cn/apache/rocketmq/4.3.2/rocketmq-all-4.3.2-source-relea ...

  5. 分布式缓存技术redis系列(四)——redis高级应用(集群搭建、集群分区原理、集群操作)

    本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 <详细讲解redis数据结构(内存模型)以及常用命令> <redis高级应用( ...

  6. MyBatis之反射技术+JDK动态代理+cglib代理

    一.反射 引用百度百科说明: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功 ...

  7. 六大主流开源SQL引擎

    导读 本文涵盖了6个开源领导者:Hive.Impala.Spark SQL.Drill.HAWQ 以及Presto,还加上Calcite.Kylin.Phoenix.Tajo 和Trafodion.以 ...

  8. Echo团队Alpha冲刺随笔 - 第二天

    项目冲刺情况 进展 项目各端都已经开始正式动工,完成了框架的搭建及小部分代码的编写 问题 对于框架使用不够熟练 心得 撸起袖子加油干! 今日会议内容 黄少勇 今日进展 实现账号绑定和首页公告信息及使用 ...

  9. Linux命令——cat/less/more的区别

    cat命令:用于显示整个文件的内容,单独使用没有翻页功能,经常和 more 命令搭配使用,cat 命令还可以将数个文件合并成一个文件. more命令:让画面在显示满一页时暂停,此时可按空格健继续显示下 ...

  10. Webpack 概念

    概念 webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图表(dependency ...