300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > javaScript文档对象模型DOM

javaScript文档对象模型DOM

时间:2021-11-06 20:47:37

相关推荐

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用的名称一样HTMLDOMsrcsrcaltalttypetypetitle titleclass classNameforhtmlFor... ...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。