zoukankan      html  css  js  c++  java
  • js入门——Dom基础

        DOM=DocumentObject Model,文档对象模型。

    Dom有三个不同的部分。

        1、核心DOM 也是最基础的文档结构的标准模型

        2、XMLDOM 针对XML文档的标准模型

        3、HTML DOM 针对HTML文档的标准模型

     

        对于一个新生程序猿来说。HTML是什么,事实上并不重要。可是都知道。html文件,能够用浏览器打开。

        HTML和XML。基本同样。仅仅只是是。HTML中节点 标记,是预先定义好的。

    而XML中的节点。由文档的作者定义。所以XML是可扩展的。

     

        HTML: 超文本标记语言。主要功能是能被浏览器解析 显示出来。HTML能够看作是一种特殊的标记语言。

        XML:可扩展标记语言。

     

        而DOM作为以上的标准。当然会对其上面进行规划:

        依据DOM,文档每一个成分都是一个节点。

    对于上面的文档。

    事实上就是一颗树。

        通过一个样例来了解一下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    		<title>DOM</title>
    		<script  src="base.js"></script>
    		<script  src="index.js"></script>
    		<link rel="stylesheet" type="text/css" href="index.css" />
    	</head>
    	<body>
    		<h1>标题H1</h1>
    		<p>p标签</p>
    		<ul>
    			<li>栏目一</li>
    			<li>栏目二</li>
    			<li>栏目三</li>
    		</ul>
    		<div id='box' name='boxs'>測试div</div>
    	</body>
    </html>
    


     

     

    什么是节点?

        文档中的全部标记,都称之为节点。

       

    DOM节点树中的节点分为:

        元素节点、文本节点、属性节点。

     

        元素节点:标记名称 如 html body div等

        文本节点:标记的内容  如  "測试div" "p标签" 等等

        属性节点:用于修饰 标记名称的。也算是 标记的属性。 如 :id='boxs'

     

    对元素元素的查询:

        元素的查询,有好多种方式。

        依据标记名称(getElementsByTagName)、id名(getElementById)、name名(getElementsByName)。

    都能够进行查找

        innerHTML:获取元素节点中的文本节点

        元素属性节点的改动。查到元素之后,也能够进行  属性的改动  attribute

     

        查找元素的时候。假设查到的元素  不止一个,那么返回的为一个节点数组。因此在使用的时候一定不能缺少数组标号。通过childNode属性来获取全部子节点

     

        对与节点来说。也是一种树形结构。当查询到一个元素节点后,这个元素节点中 也包含非常多小节点。

       

        如上所看到的的节点,由 属性节点 和 文本节点构成。使用childNodes.length  获取元素节点中的全部子节点

    使用的时候。与数组类似  childNodes[i]  对第i个子节点进行操作

         

     

    对子节点的操作

        

     

        DOM基础非常多,记是肯定记不住的。浏览一遍。了解一下,在下次使用的时候,知道有那么一回事。知道在哪里查资料即可了。

        当然,也能够依据IDE的智能提示来做。

     

  • 相关阅读:
    年末反思
    Flink运行时架构
    Phoenix 启动报错:Error: ERROR 726 (43M10): Inconsistent namespace mapping properties. Cannot initiate connection as SYSTEM:CATALOG is found but client does not have phoenix.schema.
    Clickhouse学习
    Flink简单认识
    IDEA无法pull代码到本地,Can't Update No tracked branch configured for branch master or the branch doesn't exist.
    第1章 计算机系统漫游
    简单的 Shell 脚本入门教程
    开源≠免费 常见开源协议介绍
    MySQL 视图
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5163061.html
Copyright © 2011-2022 走看看