当前位置: 首页 > 编程日记 > 正文

js里的document对象大全(DOM操作)

什么是DOM

document object model 的简称,意思为文档对象模型。主要用来对文档中的html节点进行操作。

Dom的操作简单示例:

<div id="t1"><div><input type="file" /> <input type="button" value="删除" onclick="del(this)"/></div>
</div>
<input type="button" value="增加" onClick="add()"/>
<script>
function add(){var t1 = document.getElementById('t1');//获取节点 var div = document.createElement('div');//创建div    var file = document.createElement('input');//创建input
    file.setAttribute('type','file');//设置input的类型为file    var btn = document.createElement('input');//创建input
    btn.setAttribute('type','button');//设置input的类型为button
    btn.setAttribute('value','删除');//设置input的value为删除
    btn.setAttribute('onclick','del(this)');//设置onclick事件
    div.appendChild(file);//把file添加到div中
    div.appendChild(btn);//把btn添加到div中    
    t1.appendChild(div);//把div添加到t1中
} 
function del(_this){var div = _this.parentNode;var t1 = _this.parentNode.parentNode;t1.removeChild(div);
}
</script>

Dom对象的属性与方法

返回对象集合

(1).all[];

(2).images[];

(3).anchors[];

(4).forms[];

(5).links[];

属性

document.cookie;设置或返回当前文档有关的所有cookie       

document.title;返回当前文档的标题

document.domain;返回当前文档的域名

document.URL;返回当前文档的URL

元素属性及方法

getElementById('');                 返回指定 Id 的第一个对象。

getElementsByName('');        返回指定 name名称的对象集合(下标数组)。  getElementsByName('')[0];获取对象集合的第一个对象。

 getElementsByTagName('');返回指定标签名的对象集合(下标数组)。  getElementsByTagName('')[0];获取对象集合的第一个对象。

 .length();             返回数组长度。

.getAttributeNode();返回指定属性的节点

.getAttribute('');返回元素节点的指定属性值

.createAttribute('');创造属性

.createElement_x('');创造元素

.setAttribute();把指定属性设置或更改为指定值

.setAttributeNode();设置或更改指定属性的节点

.removeChild();从元素中移除子节点

.removeAttributeNode();移除指定的属性节点,并返回被移除的节点

.removeAttribute();从元素中移除指定属性

.replaceChild();替换元素中的子节点

.insertBefore();在指定的已有的子节点之前插入新节点

.appendChild(); 向元素添加新的子节点,作为最后一个子节点

.hasAttribute();如果元素拥有指定属性,则返回true否则返回false

.hasChildNodes();如果元素拥有子节点,则返回true,否则false

.isEqualNode();   检查两个元素是否相等

.isDefaultNamespace();指定的namespaceURI是默认的,则返回true,否则返回false

.className     class属性

.id   id属性

.tagName  标签名

.style   样式属性

.nodeName   元素名称

.nodeType   元素类型

.nodeValue  元素内容

.namespaceURI  返回元素的namespace URI

.textContent         设置或返回节点及其后代的文本内容

.innerHTML          设置覆盖节点的 HTML语句

.outerHTML          节点内追加的 HTML语句

.offsetHeight 元素高度

.offsetTop 返回元素的垂直偏移位置。

.scrollTop 返回元素上边缘与视图之间的距离。

.scrollHeight 返回元素的整体高度

.clientHeight  返回元素的可视高度

.toStrings();转换成字符串

转载于:https://www.cnblogs.com/lanchang/p/7309776.html

相关文章:

【制作镜像】BCEC制作镜像

如要制作的新镜像已存在标准版本镜像&#xff0c;即linux发行版本相同&#xff08;此处指CentOS6.5 64位&#xff09;&#xff0c;可利用BCEC制作。 在BCEC创建centos6.5系统的可联外网的虚机&#xff0c;ssh到此虚机&#xff0c;用yum方式安装所需的功能&#xff1a; yum&…

Ant Design Pro 组件事件绑定 Input onChange

Input 组件的 onChange 事件绑定语法 render() {this.shop_change e > {const { value } e.target;console.log(shop_change,value)};return (<Input placeholder"" onChange{this.shop_change}></Input>)}

软件访问转向本地_我是如何从完整的初学者转向软件开发人员的,以及如何做到的...

软件访问转向本地by Madison Kanna麦迪逊卡纳(Madison Kanna) 我是如何从完整的初学者转向软件开发人员的&#xff0c;以及如何做到的 (How I went from complete beginner to software developer — and how you can too) Two years ago, I was right where you are today.两…

.NET笔试题集(五)

转载于&#xff1a;http://www.cnblogs.com/ForEvErNoME/archive/2012/09/15/2684938.html 1.什么是受管制的代码&#xff1f; 答&#xff1a;unsafe&#xff1a;非托管代码。不经过CLR运行。 2.net Remoting 的工作原理是什么&#xff1f; 答&#xff1a;服务器端向客户端发送…

devServer proxy跨域 设置代理 proxy

概念 什么是同源策略 同源策略是一种约定&#xff0c;它是浏览器最核心也最基本的安全功能&#xff0c;如果缺少了同源策略&#xff0c;则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的&#xff0c;浏览器只是针对同源策略的一种实现。 所谓同源是指…

转帖 开源游戏服务器调研

汇总贴 2013年优秀的开源引擎与开源游戏项目 http://mobile.51cto.com/aengine-431122.htm http://www.oschina.net/search?scopeproject&q%E6%89%8B%E6%B8%B8 当前的几种开源游戏服务端介绍 http://www.oschina.net/question/1986738_224669 用户贴&#xff0c;使用过后…

websockets_如何将WebSockets与AWS API Gateway和Lambda一起使用来构建实时应用程序

websocketsby Janitha Tennakoon通过詹妮莎特纳库恩 如何将WebSockets与AWS API Gateway和Lambda一起使用来构建实时应用程序 (How to build real-time applications using WebSockets with AWS API Gateway and Lambda) Recently AWS has announced the launch of a widely-r…

JS对象转URL参数

代码&#xff1a; /*** param 将要转为URL参数字符串的对象* key URL参数字符串的前缀* encode true/false 是否进行URL编码,默认为true* idx ,循环第几次&#xff0c;用&拼接* return URL参数字符串*/ var urlEncode (param,idx, key, encode)> {console.log(idx,idx…

Windows下Redis如何永久更改密码

公司使用的是Spring-session-redis 需要给Redis配置一个密码 本来我配置密码的方法是 先打开Redis服务 在采用 命令 CONFIG SET requirepass "密码" AUTH 密码 但是这样配置完密码之后再重启Redis服务密码会重置 也就是说每次打开Redis服务都要重新再配置一下密码 …

CEGUI-----动画

Animation XML files. <AnimationDefinition> <Affector name‘要被改变的属性名’ interpolator‘关键帧之间平滑过度的数值’> //specifies the name of a property that will be affected (have its value changed) as part of the animation <KeyFrame>…

react hooks使用_如何使用Hooks将React类组件转换为功能组件

react hooks使用by Balaganesh Damodaran通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to convert React class components to function components using Hooks) Over the course of the past month, I’ve spent a lot of time working with Re…

[精]Odoo 8.0深入浅出开发教程-模块开发基础

參考资料点击这里.构建Odoo模块模块组成业务对象业务对象声明为Python类, 由Odoo自己主动加载.数据文件XML或CSV文件格式, 在当中声明了元数据(视图或工作流)、配置数据(模块參数)、演示数据等.Web控制器处理Web浏览器发来的requests.静态web数据Web用到的图像, CSS或JavaScrip…

Java基础知识强化之IO流笔记41:字符流缓冲流之复制文本文件案例02(使用 [ newLine() / readLine() ] )(重要)...

1. 使用字符流缓冲流的特殊功能 [ newLine() / readLine() ] 需求&#xff1a;把当前项目目录下的a.txt内容复制到当前项目目录下的b.txt中 数据源&#xff1a; a.txt -- 读取数据 -- 字符转换流 -- InputStreamReader -- FileReader -- BufferedReader 目的地&#xff1a;…

Ant Design Pro 跳转路由 传参数,接收参数

umi/link 通过声明的方式做路由跳转。 例子: import Link from umi/link;export default () => {<div>/* 普通使用 */<Link to="/list">Go to list page</Link>/* 带参数 */<Link to="/list?a=b">Go to list page</Lin…

编写react组件_React组件的“黄金法则”如何帮助您编写更好的代码

编写react组件以及钩子如何发挥作用 (And how hooks come into play) Recently I’ve adopted a new philosophy that changes the way I make components. It’s not necessarily a new idea but rather a subtle new way of thinking.最近&#xff0c;我采用了一种新的理念&a…

js验证函数摘录

/**本文摘自&#xff1a;http://www.cnblogs.com/rob0121/articles/1776298.html* js各种表单数据验证*/ /**************************************************************************************/ /*************************************数字的验证*********************…

React for循环渲染组件

通常你需要在一个组件中渲染列表。或者循环遍历渲染相同的多个组件,下面看看怎么实现: render() {const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);return (<SelectshowSearchvalue={this.state.value}placeholder={t…

让电脑的灵魂跟你走

想必我这个题目一出来&#xff0c;大家就知道我想写的是电脑远程控制了。 电脑远程控制是为了方便人们随时随地访问自己的电脑&#xff0c;从而进行更加灵活高效的工作。最常见的远程控制是我们利用客户端直接进入后台操作命令行界面。也就是终端shell。 电影里面&#xff0c;黑…

您尝试打开的文件_您是否尝试过重新打开软件团队的身份?

您尝试打开的文件by Victoriya Kalmanovich由Victoriya Kalmanovich 您是否尝试过重新打开软件团队的身份&#xff1f; (Have you tried turning your software team’s identity off and on again?) This series portrays my experience as an R&D group leader of a gr…

vijos 1006 晴天小猪历险记之Hill——数字三角形的终极变化

题目链接&#xff1a;https://vijos.org/p/1006 数字三角形原题看这里&#xff1a;http://www.cnblogs.com/huashanqingzhu/p/7326837.html 背景 在很久很久以前&#xff0c;有一个动物村庄&#xff0c;那里是猪的乐园&#xff08;^_^&#xff09;&#xff0c;村民们勤劳、勇敢…

电磁学讲义6:高斯定理计算电场

高斯定理是电场力平方反比定律和线性叠加原理的直接结果。也可以由高斯定理作为基本规律导出库仑定律。这说明高斯定理和库仑定律是不同形式的表示电荷和电场关系的同一规律。库仑定律可以使我们从电荷分布求出电场分布&#xff0c;高斯定理可以使我们从电场分布求出电荷分布。…

ant table表格整行点击事件并获取当前行的数据

实现效果:点击表格中某一行,或者点击表格中某一行的一个字段,获取当前行的 item 下标数据,并用 Link 标签传参,下一个页面接收的实现。 如果使用 router 跳转路由传参,需要导入 import router from umi/router; 如果用 Link 跳转路由传参,需要导入 import Link from u…

以太坊公链私链_如何使用以太坊构建汽车制造供应链系统

以太坊公链私链by Marcelo Russi Mergulho由Marcelo RussiMergulho 如何使用以太坊构建汽车制造供应链系统 (How to build a car manufacturing supply chain system using Ethereum) Here at Daitan we are always looking for new technologies that can help our clients s…

微信一次性订阅消息

微信一次性订阅消息官方文档&#xff1a;消息管理>发送一次性订阅消息 开发者可以通过一次性订阅消息授权让微信用户授权第三方移动应用&#xff08;接入说明&#xff09;或公众号&#xff0c;获得发送一次订阅消息给到授权微信用户的机会。授权微信用户可以不需要关注公众号…

react控制组件的显示或隐藏, 根据state判断元素显示隐藏 , setState不实时生效解决方法

代码实现功能&#xff1a;根据 state 中的值判断子组件显示或隐藏&#xff0c;因为 setState 不是及时生效的&#xff0c;所以不做显示隐藏判断会报错。 render() {// 客户经理循环组件function CommentSpan(props){const numbers props.managers;if(!numbers) return;const l…

关于R语言plyr包的安装问题

平时安装R包都是从Rstudio中进行的&#xff0c;今天在装plyr包的时候&#xff0c;Rstudio一直报错&#xff0c;示例如下&#xff1a; 是不是很无语啊&#xff0c;搞了半天不知所以然&#xff0c;然后突发奇想从Rgui中安装试下&#xff0c;没想到轻轻松松就成功了&#xff0c;示…

regexp 好汉字符串_如何在JavaScript中使用RegExp确认字符串的结尾

regexp 好汉字符串by Catherine Vassant (aka Codingk8)由凯瑟琳瓦森(Catherine Vassant)(又名Codingk8) 如何在JavaScript中使用RegExp确认字符串的结尾 (How to use a RegExp to confirm the ending of a String in JavaScript) Using the Regexp ?️ constructor使用Regex…

【转】浅谈分布式锁

前言 随着互联网技术的不断发展&#xff0c;数据量的不断增加&#xff0c;业务逻辑日趋复杂&#xff0c;在这种背景下&#xff0c;传统的集中式系统已经无法满足我们的业务需求&#xff0c;分布式系统被应用在更多的场景&#xff0c;而在分布式系统中访问共享资源就需要一种互斥…

php中的抽象类(abstract class)和接口(interface)

一、 抽象类abstract class 1 &#xff0e;抽象类是指在 class 前加了 abstract 关键字且存在抽象方法&#xff08;在类方法 function 关键字前加了 abstract 关键字&#xff09;的类。 2 &#xff0e;抽象类不能被直接实例化。抽象类中只定义&#xff08;或部分实现&#xff0…

React 父组件给子组件传值,子组件接收

父组件传值代码&#xff1a; render() {return (<div>{this.state.list?(<GeomLine list{this.state.list}/>):null}</div>);} 子组件接收代码&#xff1a; class GeomLine extends Component {// 在组件接收到一个新的 prop (更新后)时被调用。这个方法在…