javascript-快速掌握DOM技术

Javascript的组成:

1.  js的语法(核心)。

2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。

  • DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。
  • DOM的级别(版本):DOM1,DOM2,DOM3

3. BOM(浏览器模型) 

  • BOM是Browser Object Model的缩写,简称浏览器对象模型
  • BOM提供了独立于内容而与浏览器窗口进行交互的对象
  • 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
  • BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性

快速掌握DOM技术

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

DOM 以树结构表达 HTML 文档。

DOM 节点

HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点
<html>
<head>
    <title>文档标题</title>
</head>
<body>
    <a href="www.125jz.com">我的链接</a>
    <h1>我的标题</h1>
</body>
</html>

javascript-快速掌握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,这里以设置文字颜色为例。

接下来通过具体案例来学习DOM的操作并检验学习效果吧!

W3C: HTML DOM 实例

菜鸟教程:HTML DOM 实例

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2200.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年7月14日 下午1:17
下一篇 2018年7月17日 上午11:49

99%的人还看了以下文章

  • 响应式布局和自适应的区别

    客户端,PC、平板、手机,各种尺寸,要给电脑PC和手机分别设计不同的网页吗?要给每一个手机分别设计一个网页吗? 不需要,因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别: 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小,宽度通常在600像素以下,pc…

    2019年10月15日
    2.2K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    2.5K0
  • Dedecms的tplcache文件夹是什么,可以删除吗?

    tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件,而且会越来越大。dede模板缓存可以加快网页文件的生成速度,关闭的话,理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。

    2023年3月19日
    9230
  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    2.5K0
  • 使用html、css、bootstrap设计一个电子商务网站的导航条(免费)

    本课程适合前端开发初级学习者,学习使用html、css和bootstrap技术,实现导航条设计。 预计用时:30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示

    2018年12月20日
    2.0K0
  • 纯CSS3制作的垂直手风琴效果,点击标题展开详细介绍

    纯CSS3制作的垂直手风琴效果 CSS代码: @import url(“css/font-awesome.css”); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 ‘O…

    2018年12月26日
    2.4K0

发表回复

登录后才能评论