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的智能提示来做。

     

  • 相关阅读:
    《高校大学生就业指导工作项目化管理研究》随笔
    《大学生就业网络信息服务模式研究》随笔
    文献随笔目录第五周
    申怡-《后危机时代大学生就业趋向调查研究》随笔
    文献随笔目录第四周
    《多媒体环境下大学生就业指导创新研究》随笔
    《企业参与大学生职业生涯规划对大学生就业能力的研究》随笔
    《高校就业服务信息交流平台构建研究》随笔
    《基于新媒体环境下创新高校就业创业指导工作的思考与探索》随笔
    《“双创”视阈下大学生就业教育研究》随笔
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5163061.html
Copyright © 2011-2022 走看看