关闭

JavaScript中常见的HTML DOM操作

标签: w3cjavascripthtmldom文档
307人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13200次
    • 积分:674
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:9篇
    • 译文:0篇
    • 评论:10条
    个人说明
    个人很喜欢的一句话, (摘自网络):
    时光荏苒,祝愿不要忘记曾经的初心

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

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

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

    每天进步一点点, 共勉!
    博客专栏
    最新评论