一、 dom对象控制html
    HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
    HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
    通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
    HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
        getElementByName()             -获取name
        getElementByTagName()         -获取元素
        getAttribute()                 -获取元素属性
        setAttribute()                 -设置元素属性
        childNodes()                 -访问子节点
        parentNode()                 -访问父节点
        createElement()             -创建元素节点
        createTextNode()             -创建文本节点
        insertBefore()                 -插入节点
        removeChild()                 -删除节点
        offsetHeight()                 -网页尺寸（不包含滚动条）
        scrollHeight()                 -网页尺寸（包含滚动条）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom对象控制html</title>
	</head>
	<body>
		<p name="pn">hello</p>
		<p name="pn">hello</p>
		<p name="pn">hello</p>
		<a href="#" id="aid" title="得到了a标签的属性">hello</a>
		<a href="#" id="aid2">world</a>
		<ul><li>1</li><li>2</li><li>3</li></ul>
		<div id="div">
			<p id="pid">hello</p>
		</div>

		<script type="text/javascript">
			function getName(){
				var count = document.getElementsByTagName("p");
				alert(count.length);
				var p = count[2];
				p.innerHTML = "world";
			}
			//getName();

			function getAttr(){
				var anode = document.getElementById("aid");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			//getAttr();

			function setAttr(){
				var anode = document.getElementById("aid2");
				anode.setAttribute("title","动态设置a标签的属性;即修改a标签的属性");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			//setAttr();

			function getChildNodes(){
				var childnode = document.getElementsByTagName("ul")[0].childNodes;
				alert(childnode.length);
				alert(childnode[0].nodeType);
			}
			//getChildNodes();

			function getParentNodes(){
				var div = document.getElementById("pid");
				alert(div.parentNode.nodeName);
			}
			//getParentNodes();

			function creatNode(){
				var body = document.body;
				var input = document.createElement("input");
				input.type = "button";
				input.value = "按钮";
				body.appendChild(input);
			}
			creatNode();

			function addNode(){
				var div = document.getElementById("div");
				var node = document.getElementById("pid");
				var newnode = document.createElement("p");
				newnode.innerHTML = "动态添加第一个p元素";
				div.insertBefore(newnode,node);
			}
			//addNode();

			function removeNode(){
				var div = document.getElementById("div");
				var p = div.removeChild(div.childNodes[1]);
			}
			removeNode();

			function getSize(){
				var width = document.documentElement.offsetWidth||document.body.offsetWidth;
				var height = document.documentElement.offsetHeight||document.body.offsetHeight;
				alert(width+","+height);
			}
			getSize();
		</script>

	</body>
</html>

二、 DOM操作元素的属性

<a id="aid" href="http:www.baidu.com">baidu</a>
<button onclick="demo()">anniu</button>
<script>
	function demo(){
	document.getElementById("aid").href="http:www.jikexueyuan.com";
	}
</script>

<img id="aid" src="21CN.jpg"/>
<button onclick="demo()">anniu</button>
<script>
	function demo(){
		document.getElementById("aid").src="36Kr.jpg";
	}
</script>

三、DOM操作改变CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM操作改变CSS</title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p>hello world</p>
		</div>
		<button onclick="demo()">anniu</button>
		<script type="text/javascript">
			function demo(){
				var chang=document.getElementById("div1").style.background="blue";
			}
		</script>
	</body>
</html>

四、DOM EventListener

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM EventListener</title>
	</head>
	<body>
		<button id="btn">anniu</button>
		<script type="text/javascript">
//			document.getElementById("btn").addEventListener("click",function(){
//				alert("hello");
//			});
			var x=document.getElementById("btn");
			x.addEventListener("click",hello);				//向指定元素添加句柄
			x.addEventListener("click",world);				//句柄可以添加多个，且不会覆盖
			x.removeEventListener("click",hello);			//移除添加的句柄
			function hello(){
				alert("hello");
			}
			function world(){
				alert("world");
			}
		</script>
	</body>
</html>

js-DOM控制HTML的更多相关文章

  1. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  2. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  3. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  4. JS(DOM 和 BOM)

    JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...

  5. 货架工程项目之js dom实现项目工程进度图

    笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...

  6. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  7. js DOM的几个常用方法

    <div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...

  8. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  9. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  10. Js DOM 详解

    DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...

随机推荐

  1. 神舟K650c i7（W350STQ）上成功装好Mac OS X 10.9，兼谈如何安装WinXP、7、8.1、OSX、Ubuntu五系统（Chameleon、MBR）

    作者:zyl910 参考教程——http://bbs.pcbeta.com/viewthread-1432534-1-4.html笔记本SNB和IVY平台Win7/Win8/Win8.1安装OS X ...

  2. Jquery 实现input回车时跳转到下一个input元素

      /** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INP ...

  3. 随机抽样一致性算法（RANSAC)示例及源代码

    作者:王先荣 大约在两年前翻译了<随机抽样一致性算法RANSAC>,在文章的最后承诺写该算法的C#示例程序.可惜光阴似箭,转眼许久才写出来,实在抱歉.本文将使用随机抽样一致性算法来来检测直 ...

  4. js实现表单序列化的两种方法。

    function serialize(form) { var parts = [], elems = form.elements, i = , len = elems.length, filed = ...

  5. 自定义StyleCop规则

    参考:StyleCopSDK.chm与 Byeah的 编写StyleCop自定义规则教程(一)---编写中文备注的简单校验规则 1.建立“类库”类型的C#项目 2.加入 Microsoft.Style ...

  6. C_中使用SendMessage

    SendMessage是一个在user32.dll中声明的API函数,在C#中导入如下: using System.Runtime.InteropServices; [DllImport(" ...

  7. Foundation和UIKit框架组织图

    转自:http://fantom.iteye.com/blog/1776558

  8. twisted 学习笔记二：创建一个简单TCP客户端

    #coding=utf-8 from twisted.internet import reactor,protocol class QuickClient(protocol.Protocol): de ...

  9. UNIX环境高级编程笔记之高级I/O

    本章说明了很多高级I/O功能: 非阻塞I/O——发一个I/O操作,不使其阻塞,记录锁,STREAMS机制 I/O多路转接——select和poll函数 readv和writev函数,以及存储映射I/O ...

  10. 对android应用一些破解的方法

    因为需要破解一款应用,找了些资料 Android手机中的程序文件夹拷贝到别的Android手机上还能用么? xx.apk Android个人破解应用新思路 安卓手机下xx.apk JAVA破解之旅 s ...