DOM操作html

表单

1、新增
    ---tableElement.insertRow(position) - 新增一行,返回值为一个tr节点即一个rowElement,position位置从0开始计数。

---rowElement.insertCell(position) - 新增一个单元格,返回值为一个td节点即一个cellElement,position位置从0开始计数。
2、删除
    ---tableElement.deleteRow(position) - 删除某行,position从0开始计数。
    ---rowElement.deleteCell(position) - 删除某行,position从0开始计数。

3、访问
    ---tableElement.rows - 获取表格所包含的的所有tr元素节点所组成的集合数组。

---rowElement.cells - 获取行元素节点所包含的所有td元素节点所组成的集合数组。

表单控件

1、表单控件通用属性

---value - 值。
    ---text - 文本内容。
2、select下拉框

1.访问option节点
    ---selectElement.options - 返回该select节点内子节点option节点所组成的数组

2.删除option节点

---selectElement.remove(position) - 基于select节点的remove方法,删除指定位置的option节点,从0开始计数。

3.select节点直接取值

---value - 使用通用属性value来取值,来获取选中的值。

---selectedIndex - 获取被选中的option节点的位置。

4.option节点取值

---value - 使用通用属性来获取值。
    ---text - 使用通用属性来获取文本。
    ---selected - 是否被选中。
    ---defaultSelected - 是否默认被选中。

3、radio单选框和checkbox复选框

---value - 使用通用属性获取值。
    ---checked - 是否被选中。

4 input输入框

---value - 使用通用的属性来取值。
    ---text - 使用通用属性来获取文本。
操作元素属性

---node.setAttribute("attrName", "val") - 修改或新增某属性"attrName"的值为"val"。
    ---node.getAttribute("attrName") - 获取某属性"attrName"的值。
    ---node.removeAttribute("attrName") - 删除某属性。

时间: 2024-10-22 07:29:22

DOM操作html的相关文章

jquery中的DOM操作

DOM操作分为:DOM核心.HTML-DOM.CSS-DOM 1.节点操作 查找 查找元素节点:jquery选择器 查找属性节点:attr("")方法,参数为要查询的属性的名字 创建 创建元素节点:$("html")方法,参数为HTML标记字符串,如:<p></p> 注意:(1)动态创建的新元素节点不会被自动添加到文档中,需要用其他方法插入文档中(2)创建元素时注意标签闭合,可以用$("<p></p>&quo

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

DOM操作表格

前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码.本文将详细介绍DOM操作表格的属性和方法 需求 要通过DOM实现下列格式的表格结构 <table border = "1" width = "100%">     <tbody>         <tr>           

zBase --轻量级DOM操作库

项目地址:ZengTianShengZ-github zBase-1.2.0 --v3 修复部分bug,添加AMD规范测试 zBase-1.1.0 --v2 对 v1 版本做了升级,优化DOM查找,简化API,提高代码可读性,支持模块化 支持 AMD & CommonJS zBase-1.0.0 --v1 没有任何依赖 轻量级的Dom操作库,封装一些常用的css选择器和事件操作等 Quick start $ npm install $ gulp scripts 使用npm安装 zBase: $

JQuery基本知识、选择器、事件、DOM操作、动画

1:基本选择器 <title></title> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <form id="form1" runat="server"> <div id="div1"> <a>aaaaa</a> <%--

jQuery学习之路(2)-DOM操作

▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li>

JavaScript常用原生DOM操作

最近,自己在投简历,找工作,在忙碌的复习当中,希望把有用的知识分享出去,是自己的成长,也可以给别人帮助. 今天给大家分享一些常用的原生的JavaScript DOM 操作. OK,那开始吧,那就开始吧O(∩_∩)O~~ 一.查看浏览器视口尺?   window.innerWidth/window.innerHeight(IE8以及IE8以下不能用  (′д` )-彡  )        document.documentElement.clientHeight/document.document

为什么说DOM操作很慢

原文转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint).下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的实践以及一些优化方案

DOM操作优化

缓存DOM对象 JavaScript的DOM操作可以说是JavaScript最重要的功能,我们经常要根据用户的操作来动态的增加和删除元素,或是通过AJAX返回的数据动态生成元素.比如我们获得了一个很多元素的数组data[],需要将其每个值生成一个li元素插入到一个id为container的ul元素中,最简单(最慢)的方式是: var liNode, i, m; for (i = 0, m = data.length; i < m; i++) { liNode = document.createE

Jquery基础之DOM操作

 一.jQuery对象与Dom对象的区别 一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的对象是一样的对象.所以一些新手就很迷惑,为什么${”#Element”}不能直接innerHTML,这就是原因所在,解决方式请看下文. jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有