javaScript文档对象模型DOM

文档对象模型DOM

文档对象模型（document object model）
有一个表格，点击添加按钮添加事件
- DOM中的属性和方法的理解
- DOM中属性的操作：
- 属性映射表

文档对象模型（document object model）

是针对HTML和XML文档的应用程序接口（API），通过 DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
总之：DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

有一个表格，点击添加按钮添加事件

例题图片:

在添加js之前首先创建一个html对象，进行样式添加。最后得到图片上的基础样式。
进行js样式的添加

 //根据ID查找页面元素var banner = document.getElementById('banner');var user = document.getElementById('userName');var age = document.getElementById('age');document.getElementById('btn').onclick = function () {//创建节点对象var otr = document.createElement('tr');var otd0 = document.createElement('td');var otd1 = document.createElement('td');var otd2 = document.createElement('td');// 将td放入tr中otr.appendChild(otd0);otr.appendChild(otd1);otr.appendChild(otd2);// 将tr放入tbody中banner.appendChild(otr);otd1.innerHTML = user.value;otd2.innerHTML = age.value;otd0.innerHTML = document.links.length;//复制节点var otd3 = document.getElementById('sc');var newotd3 = otd3.cloneNode(true);otr.appendChild(newotd3);//删除节点var len = document.links.length;for (var i = 1; i < len; i++) {document.links[i].onclick = function () {banner.removeChild(this.parentNode.parentNode);}}}

DOM中的属性和方法的理解

属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。

DOM中属性的操作：

属性值的修改
obj.属性名=值;
属性值的获取
obj.属性名

属性映射表

         最特殊的就是class和for的写法，其他的在HTML和DOM用的名称一样HTML               DOMsrc                srcalt                alttype               typetitle              titleclass              classNamefor                htmlFor...                 ...

javaScript文档对象模型DOM相关推荐

JavaScript文档对象模型DOM节点操作之复制节点（7）
示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
JavaScript文档对象模型DOM节点操作之删除节点（6）
removeChild方法只能删除当前节点的子节点效果展示: 示例展示: <!DOCTYPE html> <html><head><meta charset ...
JavaScript文档对象模型DOM节点操作之创建和添加节点（5）
得出结论:创建元素节点后,必须要把刚创建的元素节点添加到相应的元素下,否则不会在页面出现示例代码: <!DOCTYPE html> <html><head>< ...
JavaScript文档对象模型DOM节点操作之兄弟节点（4）
示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
JavaScript文档对象模型DOM节点操作之第一个子元素和最后一个子元素（3）
推荐使用解决方案的方法,实际开发用的就是这种方法示例代码: <!DOCTYPE html> <html><head><meta charset=" ...
JavaScript文档对象模型DOM节点操作之父节点和子节点（2）
1.父节点示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
JavaScript文档对象模型DOM节点概述（1）
JavaScript编程：文档对象模型DOM
5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...
文档对象模型DOM（获取元素节点、设置节点属性）
练习题: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...

javaScript文档对象模型DOM

文档对象模型DOM

文档对象模型（document object model）

有一个表格，点击添加按钮添加事件

DOM中的属性和方法的理解

DOM中属性的操作：

属性映射表

javaScript文档对象模型DOM相关推荐

最新文章

热门文章