JavaScript 之 DOM
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的更多相关文章
- javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
- JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript与DOM的关系
JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
- JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...
随机推荐
- Python 函数中，参数是传值，还是传引用？
在 C/C++ 中,传值和传引用是函数参数传递的两种方式,在Python中参数是如何传递的?回答这个问题前,不如先来看两段代码. 代码段1: def foo(arg): arg = 2 print(a ...
- 转：C#中Undo/Redo的一个简易实现
一个比较常见的改进用户体验的方案是用Redo/Undo来取代确认对话框,由于这个功能比较常用,本文简单的给了一个在C#中通过Command模式实现Redo/Undo方案的例子,以供后续查询. clas ...
- 1.1：Get Started with Unity Shaders
文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 第1章开始正式进入Unity Shader的学习. 什么是Shader 本 ...
- Weighted Quick Union with Path Compression (WQUPC)
在WQU基础上,添加一步路径压缩. 前面的优化都是在union,路径压缩是在find上面做文章. 这里的路径压缩我还没完全搞明白,之后不断再来的,不管是理解还是博文编排素材之类的. 说是加一步压缩是确 ...
- [c/c++] programming之路（17）、高级指针
一.二级指针 二级指针的作用:1.函数改变外部变量指针2.外挂改变一个指针的值 #include<stdio.h> #include<stdlib.h> void main() ...
- Springboot学习笔记（一）-线程池的简化及使用
工作中经常涉及异步任务,通常是使用多线程技术,比如线程池ThreadPoolExecutor,它的执行规则如下: 在Springboot中对其进行了简化处理,只需要配置一个类型为java.util.c ...
- spark生成大宽表的parquet性能优化
1. 背景介绍 将一份数据量很大的用户属性文件解析成结构化的数据供查询框架查询剖析,其中用户属性包含用户标识,平台类型,性别,年龄,学历,兴趣爱好,购物倾向等等,大概共有七百个左右的标签属性.为了查 ...
- 【SCOI 2008】奖励关
Problem Description 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关. 在这个奖励关里,系统将依次随机抛出 \(k\) 次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之 ...
- JavaScript形而上的策略模式
什么是策略模式? 先看代码片段1. // 代码片段1 var bonus = new Bonus(); bonus.setSalary(10000); bonus.setStrategy(new pe ...
- loadrunner中web_reg_save_param和web_reg_save_param_ex的区别
在使用Loadrunner进行性能测试,编写接口请求脚本时,通过会用到关联函数,而web_reg_save_param和web_reg_save_param_ex的函数有什么区别呢?以下为总结的两点, ...