一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法
即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准
二.DOM节点
1.分类
整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点
2.节点树中的节点彼此拥有层级关系
父节点,子节点,同胞
3.
<title>DOM 教程</title>,元素节点 <title>,包含值为 "DOM 教程" 的文本节点。
可通过节点的 innerHTML 属性来访问文本节点的值
三.DOM方法
DOM方法是我们可以在节点(html元素)上执行的动作  比如:添加或修改元素
DOM属性是我们可以在节点(html元素)设置和修改的值  比如:节点名和内容
1.getElementById(id) - 获取带有指定 id 的节点(元素)
getElementsByTagName()/getElementsByClassName()
2.appendChild(node) - 插入新的子节点(元素)
3.removeChild(node) - 删除子节点(元素)
四.DOM属性
DOM属性是我们可以在节点(html元素)设置和修改的值  比如:节点名和内容
1.innerHTML属性   获取元素内容的最简单方法是使用 innerHTML 属性
2.DOM节点有三个重要的属性
(1).nodeName属性:节点的名称
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
(2).nodeValue属性:节点的值
元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本本身
属性节点的nodeValue是属性的值
(3).nodeType:节点的类型,以下为常用节点类型
元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

五.DOM访问
1.访问HTML元素(节点)
 通过使用 getElementById() 方法
 通过使用 getElementsByTagName() 方法
 通过使用 getElementsByClassName() 方法
六.DOM修改
1.改变HTML内容
document.getElementById("p1").innerHTML="新文本!";
2.改变 CSS 样式
document.getElementById("p2").style.color="blue";
3.创建新的 HTML 元素
例如:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
首先必须创建该元素(元素节点),然后把它追加到已有的元素上
七.DOM元素
1.创建新的HTML元素  createElement()
2.创建新的HTML元素  insertBefore()
3.删除已有的HTML元素
例如:

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
如需删除 HTML 元素,您必须清楚该元素的父元素
------------------------------------------
能否在不引用父元素的情况下删除某个元素?
解决:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素,然后删除
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
4.替换HTML元素  replaceChild();

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

HTML DOM 学习笔记的更多相关文章

  1. Dom学习笔记

    今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...

  2. JS DOM学习笔记

    1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...

  3. Dom学习笔记-(一)

    一.概述 DOM(文档对象模型)是针对HTML和XML文档的一个API,其脱胎于DHTML. DOM可以将任意HTML和XML文档描绘成一个由多层节点构成的结构. 每一个文档包含一个根节点-文档节点, ...

  4. BOM、DOM学习笔记——JavaScript

    1.BOM的概述    browser object modal :浏览器对象模型.    浏览器对象:window对象.    Window 对象会在 <body> 或 <fram ...

  5. DOM学习笔记--入门1

    HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 首先节点有很多种,不仅仅HTML元素是节点,尤其 要注意文本节点的存在. 根据 W3C 的 HTML DOM 标准,HTML ...

  6. DOM学习笔记(三)DOM元素的访问、修改与事件

    访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...

  7. DOM学习笔记(二)对象方法与属性

    所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...

  8. DOM学习笔记(一)DOM树

    DOM 定义了访问和操作 HTML 文档的标准方法. HTML 文档中的所有内容都是节点,将 HTML 文档表达为树结构,称为节点树 HTML DOM 树 HTML DOM 是关于如何获取.修改.添加 ...

  9. DOM学习笔记(思维导图)

    导图

随机推荐

  1. UI开发学习指南

    UI:UI单元.导航.组建(增删查改).布局.风格(字体.字色): 事件处理:

  2. matlab数字图像处理 入门基础

    本代码基于张铮主编的<数字图像处理与机器视觉>一书. 源图片:lena A = imread ('lena.jpg'); %读入图像lena.jpg,赋给变量A %imwrite(A,'l ...

  3. Java Web开发中的乱码问题

    POST方法乱码: 1:存在乱码的示例: 前端页面: <%@ page language="java" contentType="text/html; charse ...

  4. Laravel小项目之第4节 Laravel-通过表单实现新增及操作状态提示功能

    第4节 Laravel-通过表单实现新增及操作状态提示功能 4.1 显示新增表单视图 4.2 通过模型实现新增 4.3 操作状态提示 4.1 显示新增表单视图 修改边栏的链接 \resources\v ...

  5. ORB-SLAM2(3) ROS下实时跑ORB_SLAM2

    Step1 : 运行内核 roscore Step2 : 启动相机 cd catkin_ws/src/usb_cam/launch #进入usb_cam驱动的安装目录 roslaunch my_cam ...

  6. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  7. MetaMask/metamask-inpage-provider

    https://github.com/MetaMask/metamask-inpage-provider Used to initialize the inpage ethereum provider ...

  8. Sysbench-OLTP数据库测试

    使用sysbench进行oltp测试之前,需要核对一下sysbench的版本,因为不同版本在使用的参数时,会有一定的差异. mysql dba这本书中的sysbench使用的是0.5的版本,ubunt ...

  9. nginx的server块如何支持php

    直接贴代码,备份用 server { listen ; server_name abc.com; index index.html index.htm index.php; root /var/www ...

  10. springboot2.0添加logback

    程序代码 import org.slf4j.Logger; import org.slf4j.LoggerFactory; public class PreFilter extends ZuulFil ...