梦蓝樱飞(一点一滴, 记录个人成长之路)

时光荏苒,祝愿勿忘曾经的初心 && 活在当下,一定做好现在的事情

JavaScript中常见的HTML DOM操作

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>







阅读更多
版权声明:本文为 梦蓝樱飞 原创文章,可以随意转载,但真诚希望在明确位置注明原文超链接的出处!!! 非常感谢! https://blog.csdn.net/menglanyingfei/article/details/52971043
个人分类: JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭