JavaScript之浅谈DOM操作

1.理解DOM:

  DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口。

  怎么说,我从两个角度理解:
  • 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口。
  • 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙。
  所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点,触摸Html每寸肌肤。(咳。。。)
 
2.介绍Html的DOM树:
说明:html标签通过浏览器的解析后才会形成dom树,此后HTML中的每个标签元素,属性,文本都能看做是一个DOM的节点,JavaScript都能通过dom的提供的编程接口操作到每个节点,去了解浏览器的渲染机制能够帮助我们了解dom。
Html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
</head>
<body>
<div>
<a href="www.baidu.com">百度</a>
</div>
</body>
</html>

对应的DOM树结构图:

3.认识JavaScript中的DOM编程接口:
上面说了html形成的dom树,接着说下通过js的dom编程接口去操作这棵dom树。
JavaScriptDOM操作的常用方法和属性::
  • 常用方法:
  1. 获取节点:
    1. document.getElementById(idName)          //通过id号来获取元素,返回一个元素对象
    2. document.getElementsByName(name)       //通过name属性获取id号,返回元素对象数组
    3. document.getElementsByClassName(className)   //通过class来获取元素,返回元素对象数组(ie8以上才有)
    4. document.getElementsByTagName(tagName)       //通过标签名获取元素,返回元素对象数组
  2. 获取/设置元素的属性值:
    1. element.getAttribute(attributeName)     //括号传入属性名,返回对应属性的属性值
    2. element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值
  3. 创建节点Node:
    1. document.createElement("h3")       //创建一个html元素,这里以创建h3元素为例
    2. document.createTextNode(String); //创建一个文本节点;
    3. document.createAttribute("class"); //创建一个属性节点,这里以创建class属性为例
  4. 增添节点:
    1. element.appendChild(Node);   //往element内部最后面添加一个节点,参数是节点类型
    2. elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode
  5. 删除节点:
    1. element.removeChild(Node)    //删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null
 
  • 常用属性:
  1. 获取当前元素的父节点 :
    1. element.parentNode     //返回当前元素的父节点对象
  2. 获取当前元素的子节点:
    1. element.chlidren        //返回当前元素所有子元素节点对象,只返回HTML节点
    2. element.chilidNodes   //返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)
    3. element.firstChild      //返回当前元素的第一个子节点对象
    4. element.lastChild       //返回当前元素的最后一个子节点对象
  3. 获取当前元素的同级元素:
    1. element.nextSibling          //返回当前元素的下一个同级元素 没有就返回null
    2. element.previousSibling   //返回当前元素上一个同级元素 没有就返回null
  4. 获取当前元素的文本:
    1. element.innerHTML   //返回元素的所有文本,包括html代码
    2. element.innerText     //返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码
  5. 获取当前节点的节点类型:node.nodeType   //返回节点的类型,数字形式(1-12)常见几个1:元素节点,2:属性节点,3:文本节点。
  6. 设置样式:element.style.color=“#eea”;      //设置元素的样式时使用style,这里以设置文字颜色为例。
4.总结:
大家都会觉得用jQuery来操作dom会更加的方便且好用,因为jq对js的dom进行了封装,使得我们Write Less, Do More。但是我觉得还是要总结一下原生js的dom,从根本上了解js对dom的操作,只会有利而无害。
 
 
作者:Ry-yuan
如有错误欢迎各大网友指出
如需转载请标注原文地址:http://www.cnblogs.com/Ry-yuan/p/6918155.html
 

JavaScript--浅谈DOM操作的更多相关文章

  1. Js之浅谈dom操作

    JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

  2. 从JS和jQuery浅谈DOM操作,当我们在获取时,究竟获取了什么

    0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...

  3. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  4. 浅谈DOM性能考虑

    浅谈DOM性能考虑 很多人都会忽视脚本对Web应用整体性能的影响.为保证应用的流畅运行,在为文档编写和应用脚本时,需要注意一些问题.一.尽量减少访问DOM和尽量减少标记    访问DOM的方式对脚本性 ...

  5. 原生JavaScript常用的DOM操作

    之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或 ...

  6. javascript教程2:---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  7. 浅谈DOM事件的优化

    在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚 ...

  8. 网页制作之JavaScript部分 2 - DOM操作

    1.DOM的基本概念  htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对 ...

  9. JavaScript基础:DOM操作详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...

随机推荐

  1. 在Ubuntu中增加root用户登录

    一:增加root用户登录 1.打开终端,输入:sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2.在弹出的编辑框里输入:gree ...

  2. windows7下部署tomcat

    需要准备的软件: 1.JDK 安装程序 2.Tomcat 安装程序 JDK安装步骤: 安装方式:使用安装程序进行安装.使用JDK文件夹,免安装,以下步骤使用的是文件夹免安装,只需配置环境变量 配置环境 ...

  3. DIV居中的几种方法

    1. body{ text-align:center; } 缺点:body内所有内容一并居中 2. .center{ position: fixed; left: 50%; } 缺点:需要设置posi ...

  4. 《Head First 设计模式》读书笔记

    目录 <Head First 设计模式>读书笔记 创建模式 结构模式 行为模式 用思维导图记录的读书笔记. <Head First 设计模式>读书笔记 模式的分类遵循<设 ...

  5. HTTP请求头及其作用 转

    HTTP请求头Header及其作用详解 下面是访问的一个URL,http://www.hzau.edu.cn的一个header,根据实例分析各部分的功能和作用. 1.Accept,浏览器端能够处理的内 ...

  6. python的 del 函数是删对象还是删引用

    1.首先介绍下python的对象引用 1)Python中不存在传值调用,一切传递的都是对象引用,也可以认为是传址调用.即Python不允许程序员选择采用传值或传引用.Python参数传递采用的是“传对 ...

  7. 【数组】Container With Most Water

    题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...

  8. 几句话说说跨IDC分布式数据库Calvin

    CalvinFS拿了FAST 15最佳论文:找到了失联十三年的小伙伴:年终/年初整理资料,发现做团委工作的 King 师兄对Calvin有兴趣:最近其他团队对分布式事务和存储问题/兴趣较多……几件事激 ...

  9. PTA (Advanced Level) 1021 Deepest Root

    Deepest Root A graph which is connected and acyclic can be considered a tree. The hight of the tree ...

  10. SpringBoot入门 (五) 数据库访问之spring data jpa

    本文记录学习使用spring data jpa访问数据库 一 什么是Spring Data JPA JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java ...