- 浏览: 633506 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (609)
- java (139)
- 数据库 (107)
- 微信 (23)
- IT生活 (5)
- web前端 (74)
- SSH (11)
- 设计模式 (12)
- 重要资料 (11)
- 其他 (15)
- java技巧 (23)
- 服务器 (9)
- 2D/GUI (3)
- JAVA3D (2)
- ANT (5)
- Apache项目 (19)
- 数据类型 (10)
- 报表 (3)
- Collections (6)
- SQL/JDBC (15)
- 开发类 (6)
- EJB (6)
- Email (6)
- 文件读写 (2)
- 游戏 (0)
- Flex (2)
- Generic (2)
- HIbernate (12)
- I18N (5)
- Java EE (9)
- java ME (4)
- JDK 6 (8)
- JNDI/LDAP (5)
- JSP (7)
- JSTL (2)
- 正则表达式 (2)
- 安全 (2)
- Struts2 (12)
- Spring (4)
- Web服务 (10)
- Xml (1)
- JavaScript (30)
- AJAX (7)
- 验证 (4)
- 上传下载 (1)
- office办公软件 (1)
- Android (2)
- IOS (0)
- Dubbo (3)
- memcached/redis (1)
- 小程序 (1)
- 微信公众号 (0)
最新评论
-
wf_wangfeng:
怎么我用第一种方法不行呢 alert(document.rea ...
当jsp页面完全加载完成后执行一个js函数 -
Lori_Liu:
有帮助,至少可以解决了目前所遇到的问题!谢谢..
当jsp页面完全加载完成后执行一个js函数 -
starbhhc:
String actionMessage = new Stri ...
Java读取txt文件乱码 -
starbhhc:
Sev7en_jun 写道GOOD
客气,互相交流。。
javaeye论坛规则小测验(答案)--star -
Sev7en_jun:
GOOD
javaeye论坛规则小测验(答案)--star
S-DOM Element方法和属性
一,获取html元素
1.getElementByID(id)
通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.
example:
<div id="divid">测试</div>
<script language="javascript">
var div=document.getElementByID("divid");
alert (div.nodeName); //显示元素名
</script>
如果id在元素中不是唯一的,那么获得的将是第一个ID.
2.getElementsByName(name)
仅用于input radio checkbox等元素,返回名字为name的元素数组
example:
<div name="george"></div>
<input name="george"></div>
<script language=javascript>
var ge=document.getElementsByName("george");
alert (georges.length); //获取georges个数,对div唔效果
</script>
3.getElementsByTagName(tagname)
返回具有tagname的元素列表数组.处理大的DOM结构会用到它
二,DOM Element常用方法
1.appendChild(node) //增加内容
向当前对象追加节点,example:
<div id="test">123</div>
<script type="text/javascript">
var newdiv=document.createElement("div");
var newtext=document.createTextNode("A new div");
newdiv.appendChild(newtext) ;
document.getElementById("test").appendChild(newdiv) ;
</script>
当然,上面的功能用document.getElementById("test").innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM.
2,removeChild(childreference)
移除当前节点的子节点,并返回节点
<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=document.getElementById("child");
var removednode=document.getElementById("father").removeChild(childnode)
</script>
3.cloneNode(deepBoolean)
复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性.
4,insertBefore(newElment,targetElement) 插入新的节点
在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点.
example:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var lovespan=document.getElementById("lovespan"); //获取id
var newspan=document.createElement("span");
var newspanref=document.body.insertBefore(newspan, lovespan);
newspanref.innerHTML="鱼与";
</script>
三,DOM Element常用属性
1、childeNodes 返回所有子节点对象,
例如
<ul id="mylist">
<li>美国</li>
<li>意大利</li>
<li>加拿大</li>
</ul>
<script>
var msg="" ;
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
var li=mylist.childNodes[i];
msg+=li.innerText;
}
alert (msg);
</script>
2,innerHTML
这是一个标准,但它并不书DOM
例如:
<div id="bbb"><span id="aaa">我拉</span></div>
<input type=button value="点击看看">
<script language="javascript">
function change()
{
document.getElementById("aaa").innerHTML= "修改修改";
}
</script>
3,style
这是一个极其重要的属性,可以获取并修改每个单独的样式.
例如:document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"
4、firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点的对象。
nextSibling 返回下一个兄弟节点的对象
previousSibling 返回前一个兄弟节点的对象
nodeName 返回节点的HTML标记名称,使用英文的大写字母,如P, FONT
5,click()
执行元素的一次点击,可以用于通过脚本来触发onClick函数
发表评论
-
npm安装教程
2020-11-23 16:09 596一、使用之前,我们先来掌握3个东西是用来干什么的。 npm ... -
手机上万能返回上一页代替history.go(-1)
2016-05-13 11:25 778最近在做wap2.0的手机wap,写返回上一页的时候,开始 ... -
3.nodejs nodejs的mysql模块
2016-04-12 22:20 513安装nodejs的mysql模块首先要选定一个数据库,我选择 ... -
2.nodejs 使用Express4.x搭建第一个Web应用
2016-04-12 09:36 554Express4.x 是一个开源的node.js项目框架 ... -
1.nodejs windows 下安装nodejs
2016-04-12 09:34 3721.下载: 在nodejs的官方网站下载mis文件。ht ... -
Nodejs学习
2016-04-11 17:21 493将介绍如何利Javascript做为服务端脚本,通过Node ... -
HTML5做手机站页面字体显示很小的解决方法
2016-05-28 23:31 690HTML5做手机站需要加上一部分代码,不然字体会显示很小的 ... -
jquery 校验
2015-07-07 11:16 0EasyUI 验证框使用方法: ... -
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2015-05-20 09:49 560一、javascript函数实现: //JavaS ... -
//from提交表单 使用ajax异步读取,回调函数
2015-04-24 18:05 0<%@ page language="ja ... -
js获取带checkbox行的记录的Id值的两个方法
2015-04-09 14:44 651第一种: function updateProcess() ... -
基于注解的SpringMVC简单介绍
2015-04-03 11:58 561SpringMVC是一个基于DispatcherServle ... -
Linux环境下Nginx的安装
2014-03-28 13:26 453Linux下命令: /usr/local/nginx/s ... -
自用打印(二)
2014-03-19 17:30 537<html> <title> ... -
自用打印方法(一)
2014-03-19 17:25 427经过验证的,自用的。 ... -
各种微博分享代码
2014-03-19 15:56 876<HTML> <HEAD> ... -
JSP页面打印(二)
2014-03-18 11:04 731<HTML><HEAD><T ... -
JSP页面打印方法(一)
2014-03-18 10:57 3067JSP页面打印方法 方法一:function Print ... -
jquery和js初始化加载的多种方法
2014-01-20 14:48 872jquery和js初始化加载页面的区别: jquery:等 ... -
js自动刷新当前页面
2013-12-19 14:09 758reload 方法,该方法强 ...
相关推荐
DOM Element常用方法和属性,如getElementByID(id)、getElementsByName(name)等等
domElement . attr ( element , "class" , "active" ) ; // SetterdomElement . attr ( element , "class" ) ; //GetterattrNS(元素,ns,名称,值) 获取/设置具有特定命名空间的属性。 domElement . attrNS ( ...
4.3.4 跨浏览器的事件属性和方法 4.4 小结 第5章 动态修改样式和层叠样式表 5.1 W3CDOM2样式规范 5.1.1 CSSStyleSheet对象 5.1.2 CSSStyleRule对象 5.1.3 CSSStyleDeclaration对象...
要加载插件,请配置ckeditor(例如,编辑文件ckeditor.js ),如下所示:导入插件import CustomElementPlugin from 'ckeditor5-custom-element/src/customelement';导入工具栏图标(可选) import Icon1 from 'path...
在virtual-dom的h上撒上一些成分和JSX糖。 使用为您的虚拟dom树提供类似于React / deku的组件API。 安装 $ npm install vdom-element 用法 import element from 'vdom-element' import Dropdown from 'components/...
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法...
arguments-target:[DOMElement,insertPosition] | DOMElement-tag:HTML标签名称属性:HTML属性,样式 property- $ parent:DOMElement- $:DOMElement 方法-HTML :(模板| $ target,模板)=> void-addHTML :...
4.3.4 跨浏览器的事件属性和方法 4.4 小结 第5章 动态修改样式和层叠样式表 5.1 W3CDOM2样式规范 5.1.1 CSSStyleSheet对象 5.1.2 CSSStyleRule对象 5.1.3 CSSStyleDeclaration对象...
4.3.4 跨浏览器的事件属性和方法 4.4 小结 第5章 动态修改样式和层叠样式表 5.1 W3CDOM2样式规范 5.1.1 CSSStyleSheet对象 5.1.2 CSSStyleRule对象 5.1.3 CSSStyleDeclaration对象...
二、节点的基本概念 三、 通过document对象来操作html页面...四、 document对象的基本属性 五、 Element对象的属性和方法: 六、 元素的属性和方法 七、 节点的操作(属性和方法) 基础知识归纳,可用于学习自身的巩固
最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多。要注意:NodeList是‘动态的’,也就是说,每次访问NodeList对象,都会运行一次查询,虽然...
dom-binder DOM 绑定器安装$ component install alexeyraspopov/dom-binder$ bower install dom-binder应用程序接口 bind(node, attr, observer)observer应该提供方法subscribe ,它传递一个函数并立即用最新的值...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]一、DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的。DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能...
1:获取对象的三种方法 ...2:属性的set和get方法. 1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute; 2)object.setAttribute(attribute,value);设置元素的属性.==
6.5.3 通过原型属性为对象添加属性和方法 6.5.4 常见属性和方法汇总 6.6 Boolean对象 6.6.1 创建Boolean对象的实例 6.6.2 将Boolean对象转化为字符串 6.6.3 常见属性和方法汇总 6.7 Function对象 6.7.1 两个概念:...
6.5.3 通过原型属性为对象添加属性和方法 6.5.4 常见属性和方法汇总 6.6 Boolean对象 6.6.1 创建Boolean对象的实例 6.6.2 将Boolean对象转化为字符串 6.6.3 常见属性和方法汇总 6.7 Function对象 6.7.1 两个概念:...
删除5.DOM节点类型(元素和文本)6.DOM属性节点7.DOM高级操作 1. DOM的概念和作用 DOM 是 JavaScript操作网页的api接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript...
element --save将它包含在您的页面上并调用document.registerReactElement : [removed][removed][removed]var ReactComponentClass = React.createClass({ render: function(){ return React.DOM.p(null, this....
如果有必要, 将CSS属性名称转换为供应商特定的属性名称。 getElementSize 收集元素的框模型值(边距,边框,填充,宽度和高度)。 例子 import { getElementSize } from 'event-utils'; let size = ...
5.5.1 常用属性和方法 112 5.5.2 History对象的应用实例 113 5.6 Frame对象 115 5.6.1 Frame对象概述 115 5.6.2 常用属性 116 5.6.3 Frame对象的应用实例 117 第6章 DOM对象 122 6.1 DOM概述 122 6.1.1 DOM简介 122 ...