1. DOM

DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

   节点树 

  • 文档是一个文档节点。
  • 所有的HTML元素都是元素节点。
  • 所有 HTML 属性都是属性节点。
  • 文本插入到 HTML 元素是文本节点。are text nodes。
  • 注释是注释节点。

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

 Document文档对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

标签元素的操作

1）获得元素对象：

根据id获得一个元素：getElementById(id属性值)

根据标签名称获得多个元素：getElementsByTagName(标签名称)

根据class属性获得多个元素：getElementsByClassName(class的属性值)

根据name属性获得多个元素：getElementsByName(name属性值)

2）创建一个新元素：createElement()

3）将元素放到某个父元素的内部：appendChild()

4）删除节点 ：removeChild（）

5）将一个子节点替换成另一个： replaceChild（newnode,oldnode）

            //创建节点

			var oBox = document.getElementById("box");

			var oDiv = document.createElement("div");

			var oTxt = document.createTextNode("hello dom");

			oDiv.appendChild(oTxt);

			oBox.appendChild(oDiv);

			//修改节点

			var oDiv = document.createElement("div");

			var oBox = document.getElementById("box");

			var oP = oBox.getElementsByTagName("p")[0];

			var oSpan = document.getElementsByTagName("span")[0];

			//var oBody = document.getElementsByTagName("body")[0];

			//document.body.replaceChild(oDiv,oSpan);

			//oBody.replaceChild(oDiv,oSpan)

			//删除节点

			oBox.removeChild(oP);

  属性的操作

获得属性的值：getAtrribute(name)

设置属性的值：setAtrribute(name,value)

删除某个属性：removeAtrribute(name)

 children  &  childNodes 

获得子元素节点

children 常用，childNodes 会把换行也输出为text。

 innerHTML &  outerHTML  &  innerText

innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。可读可写

outerHTML 返回调用它的元素及所有子节点的 HTML 标签。 可读可写

innerText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过 innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过 innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。

 firstChild/lastChild/parentNode/previousSibling/nextSibling

第一个子节点，最后一个子节点，父亲节点，上一个兄弟节点，下一个兄弟节点

***   firstChild & firstElementChild     第一个子节点

现代浏览器支持这两个   IE低版本不支持firstElementChild。

兼容写法 ： oFirst=oUl.firstElementChild || oUl.firstChild  （前后顺序不可颠倒）

      实现表格的添加删除

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		姓名：<input type="text">年龄：<input type="text">性别：<input type="text"><input type="button" value="添加">

		<table>

		</table>

		<script type="text/javascript">

			var aInput = document.getElementsByTagName("input");

			var len = aInput.length;

			var oTable = document.getElementsByTagName("table")[0];

			aInput[aInput.length-1].onclick = function(){

				var oTr = document.createElement("tr");

				for(var i = 0; i < len-1; i++){

					var oTd = document.createElement("td");

					//var oTxt = document.createTextNode(aInput[i].value);

					oTd.innerHTML = aInput[i].value;

					oTr.appendChild(oTd);

				}

				/*var oBtn = document.createElement("input");

				oBtn.type = "button";

				oBtn.value = "删除";

				oTr.appendChild(oBtn);*/

				oTr.innerHTML += "<td><input type='button' class='delBtn' value='删除'></td>";

				oTable.appendChild(oTr);

				var oDelBtn = document.getElementsByClassName("delBtn");

					/*for(var i = 0; i < oDelBtn.length; i++){

						oDelBtn[i].onclick = function(){

							oTable.removeChild(this.parentNode.parentNode);

							//console.log(this.parentNode.parentNode);

						}

					}*/

					oDelBtn[oDelBtn.length - 1].onclick = function(){

							oTable.removeChild(this.parentNode.parentNode);

					}

			}

		</script>

	</body>

</html>

JavaScript 之 DOM的更多相关文章

  1. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  2. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  3. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  4. JavaScript与DOM的关系

    JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...

  5. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  6. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  7. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  8. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

  9. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  10. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

随机推荐

  1. 改写pipeline

    为什么要改写方法:get_media_requests,他们的区别在哪里 def get_media_requests(self, item, info):#原始的 return [Request(x ...

  2. [openjudge-动态规划]鸣人的影分身

    题目描述 描述 在火影忍者的世界里,令敌人捉摸不透是非常关键的.我们的主角漩涡鸣人所拥有的一个招数--多重影分身之术--就是一个很好的例子. 影分身是由鸣人身体的查克拉能量制造的,使用的查克拉越多,制 ...

  3. re正则匹配

    import re #'(?P<name>...)' 分组匹配print(re.search("(?P<id>[0-9]+)","abc12345 ...

  4. week_one-python格式化输出

    1.多行格式化输出 (1) # Author:larlly name = input("input your name :") age = input("input yo ...

  5. 融云开发漫谈：你是否了解Go语言并发编程的第一要义？

    2007年诞生的Go语言,凭借其近C的执行性能和近解析型语言的开发效率,以及近乎完美的编译速度,席卷全球.Go语言相关书籍也如雨后春笋般涌现,前不久,一本名为<Go语言并发之道>的书籍被翻 ...

  6. springmvc+hibernate在实体类中设置外键

    1.表User id主键,username,password,dept... 表Attendence id主键,uid外键,time... @ManyToOne @JoinColumn(name = ...

  7. hisi 生产固件生成

    生产需求,需要16M bin 文件 给 spi flash烧写 一般有三种方式 1.把文件都导入flash,拆了flash 用烧录器读取,比较可靠! 2.编译时候合并,需要在空余地方填充0xFF拼成1 ...

  8. SAP的软件维护费用，交还是不交？

    SAP的软件维护费用,交还是不交? 首先我们要明确一点,什么是软件维护费用?     软件维护费用是指在企业购买了软件厂商的软件产品之后,软件厂商每年按照一定比例向企业收取一定的技术支持维护费用.收取 ...

  9. CSS实现输入框宽度随内容自适应效果

    有时候我们会遇到如下需求:输入框的宽度随内容长度自适应,当输入框宽度增大到一定值时,里边的内容自动隐藏. 面对这种需求,我们首先想到的是使用input元素标签,但是发现input标签的宽度默认设定的是 ...

  10. Python自学:第三章 访问列表元素

    #输出并首字母大写 bicycles = ['trek','cannondale','redline','specialized'] print(bicycles[0].title()) 输出为: T ...