关闭

JavaScript中常见的HTML DOM操作

标签: w3cjavascripthtmldom文档
408人阅读 评论(0) 收藏 举报
分类:

DOM是文档对象模型(Document Object Model)的缩写,DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”


以下是一段HTML的代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML DOM</title>
	</head>
	<body>		
		<h1>DOM的结构</h1>		
		<p><a href="href">链接</a></p>
	</body>		
</html>

同时,DOM解析HTML文档在内存中是以树状形式显示的。




* 元素对象
    * 获取元素对象
        * getAttribute("属性名称");                        获取属性的值
        * setAttribute("属性名称","属性的值");    设置或者修改属性的值
        * removeAttribute("属性名称");                删除属性    
    * 获取元素下的所有子节点(*****)
        * ul.getElementsByTagName("li");


* 方法
    巧用this对象
    * hasChildNodes()        检查是否包含子节点
    * hasAttributes()             检查是否包含属性
                
    * appendChild(node)                父节点调用,在末尾添加子节点
    * insertBefore(new,old)             父节点调用,在指定节点之前添加子节点
    * replaceChild(new,old)            父节点调用,替换节点
    * removeChild(node)                 父节点调用, 删除节点
                
    * cloneNode(boolean)               不是父节点调用,复制节点
        * boolean:      如果是true,复制子节点
                                 如果是false,不复制子节点,默认是false



* Document:代表整个文档
    * 方法:
        document.getElementById("id的值");
        通过元素的id的属性获取元素(标签)对象
        getElementsByName("name属性值");        
        通过名称获取元素对象的集合(返回数组)
        getElementsByTagName("标签名称");    
        通过标签名称获取元素对象的集合(返回数组)
            
        * write("文本的内容(html的标签)")        把文本内容写到浏览器上        
        * createElement("元素名称");                     创建元素对象
        * createTextNode("文本内容")                    创建文本对象        
        * appendChild("子节点")                             添加子节点


        在末尾添加子节点示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
		</ul>
	</body>
		<script type="text/javascript">
			//创建元素对象
			var li = document.createElement("li");
			//创建文本的对象
			var text = document.createTextNode("深圳");
			//把文本对象添加到元素对象下面,作为子节点
			li.appendChild(text);
			//获取ul
			var ul = document.getElementsByTagName("ul")[0];
			//把元素对象添加到ul下面,作为子节点
			ul.appendChild(li);		
		</script>
</html>

         以及在指定节点之前添加子节点:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<ul id="ul">
				<li>Java</li>
				<li id="C">C++</li>
				<li>PHP</li>
			</ul>	
			<ul>
				<li id="py">Python</li>
			</ul>
			<button onclick="run()">
				我是按钮
			</button>
	</body>
		<script type="text/javascript">
		//* insertBefore(new,old)		在指定节点之前添加子节点
		function run() {
			var ul = document.getElementById("ul");
			var C = document.getElementById("C");
			var py = document.getElementById("py");
			
			ul.insertBefore(py, C);
			
			alert("Test is successful!");
		}	
		</script>
</html>







2
0
查看评论

快速简单解决Ubuntu安装后无wifi列表, 连不了网.

问题: 安装完ubuntu,在网络里不显示无线网络,无法连接wifi? (即无法自动连接WIFI) 大致原因为无线网卡驱动没有安装!解决方法: 1. 用网线插入电脑, 没有的话, 也可以先用手机连上WIFI, 打开手机USB共享网络(强烈推荐这种方案), 以下是华为手机该功能的截图(不同手机...
  • menglanyingfei
  • menglanyingfei
  • 2017-09-28 16:04
  • 1614

破解百度网盘 -- 使下载速度增加20倍

本文地址: http://blog.csdn.net/menglanyingfei?viewmode=contents需要条件Windows 10 操作系统 Firefox浏览器(当然Chrome也行, 不过本人是火狐忠实支持者, Chrome用得不习惯, 操作大同小异!) 愿意折腾的你必备工具...
  • menglanyingfei
  • menglanyingfei
  • 2017-10-08 15:34
  • 1134

使用table自带方法和DOM方法操作HTML table的区别

注:使用createDocumentFragment创建TABLE 行的效率要高 使用table自带方法和DOM方法操作HTML table的区别 table表格的操作有两种方法,一种是标准的Table对象方法: 方法 描述 IE F O W3C ...
  • hongweigg
  • hongweigg
  • 2015-01-05 17:22
  • 1495

JavaScript中对DOM对象进行操作

一、什么是DOM对象  DOM对象是文档对象模型,是基于浏览器编程一套API接口,通过它,我们可以访问HTML文档对象属性、方法、事件,还可以对其进行操作。 二、DOM节点树  在HTML中所有的事物都有节点,DOM将HTML文档视作节点树,通过DOM,节点树中的是所有节点...
  • Hchengbowen
  • Hchengbowen
  • 2017-01-04 16:43
  • 1109

Dom节点操作常用方法

1.访问/获取节点 document.getElementById(id);           //返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name);      //返回带有指定名称的节点集合   注意拼写:Elemen...
  • Sky786905664
  • Sky786905664
  • 2017-03-23 15:29
  • 246

AJAX入门---DOM操作HTML

文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。
  • Senior_lee
  • Senior_lee
  • 2014-08-05 09:50
  • 2018

js实验4.(3)DOM元素操作

3、DOM用正文为空的dom.html,通过javascript的DOM操作,实现以下html网页(jys.html):  实现的javascript代码如下: DOM p {font-size:20px} var h1 = document.createElem...
  • qq_33826977
  • qq_33826977
  • 2017-04-16 23:48
  • 565

XML DOM.HTML DOM和JS之间的关系

W3C所制订的DOM Level分为两大模块:Core和HTML。 1.Core核心,W3C规范:满足软件开发者和Web脚本编写者,访问和操控产品项目中包含的可解析的HTML和XML内容。 2.HTML模块,规范描述为:HTML之中特定元素的功能,和恰到好处的、易用的、针对常见性任务的H...
  • qq_32468225
  • qq_32468225
  • 2016-12-13 06:54
  • 648

使用javaScript和DOM操作svg元素

基本的svgDOM树:  This is a basic SVG document! 使用JAVASCRIPT访问SVG元素,并获取属性值  function showRectArea(evt) { var wi...
  • slalx
  • slalx
  • 2007-05-07 12:06
  • 4613

JavaScript对象(四)之HTML DOM对象

前面提到过的JavaScript的String对象、Date对象、Array对象、Boolean对象、Math对象、RegExp对象等都是JavaScript的内置对象。JavaScript可以使用HTML DOM(HTML Document Object Mode 文档对象模型)动态修改网页。 ...
  • shadowyelling
  • shadowyelling
  • 2012-03-26 14:02
  • 8399
    个人资料
    • 访问:29562次
    • 积分:1321
    • 等级:
    • 排名:千里之外
    • 原创:86篇
    • 转载:11篇
    • 译文:0篇
    • 评论:12条
    个人说明
    个人很喜欢的一句话, (摘自网络):
    时光荏苒,祝愿不要忘记曾经的初心

    本人现在是一名大二软件工程专业的学生, 每月会坚持更新, 本博客会总结, 整理, 分享个人学习的相关技术知识, 用来记录自己不断进步的历程, 当然内容会以Java为主线.

    虽然是技术博客, 但毕竟是人, 也有自己的情感, 所以, 有时也会分享一些有用的学习资源和一些学习经验和方法, 同时也会写一些其它方面上自己的感受和想法!

    或许我的博客不是写得非常好, 但每一篇文章绝对会用心写! 如果, 你发现有不足或者错误之处, 非常欢迎指出, 当然也欢迎各位小伙伴们来交流技术和学习感受.

    每天进步一点点, 共勉!

    博客专栏
    最新评论