DOM常见属性及用法
1：innerHTML、outerHTML、innerText、outerText
innerHTML: 设置或获取位于对象起始和结束标签内的HTML。
outerHTML: 设置或获取对象及其内容的HTML。
innerText: 设置或获取位于对象起始和结束标签内的文本。
outerText: 设置（包括标签）或获取（不包括标签）对象的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<ul id="test">
<li><i>点击1</i></li>
<li>点击2</li>
<li>点击3</li>
<li>点击4</li>
</ul>
<script type="text/javascript">
var test = document.getElementById('test');
var lis = test.getElementsByTagName('li'); var handlers = function (nodes) {
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(){
console.log(this.innerHTML);
console.log(this.outerHTML);
console.log(this.innerText);
console.log(this.outerText);
}
}
};
handlers(lis);
#results
//<i>点击1</i>
//<li><i>点击1</i></li>
//点击1
//点击1
</script>
</body>
</html>
特别说明：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。
2:Javascript中取得某个元素的方法有：
getElementById('节点id')、getElementsByTagName('标签名')、getElementByName('name属性值')；
3：添加、移除、创建元素、复制节点和查找节点以及判断节点类型：
添加：appendChild(newNode)向节点最后添加一个子节点。也可以从一个元素向另一个元素移动元素。参见http://www.w3school.com.cn/jsref/
移除：removeChild(node) 从元素中移除指定的子节点。
创建：creatElement(tagName)创建元素节点。此方法返回一个Element对象。
复制：node.cloneNode(deep)创建节点的拷贝，并返回该副本。deep为布尔值，默认为false，此时克隆节点的所有属性以及他们的值。设置为true时，克隆节点及其属性，以及所有后代。
DOM常见属性及用法的更多相关文章
- IOS UI segmentedControl UISegmentedControl 常见属性和用法
UISegmentedControl中一些常见的属性和用法 //设置以图案作为分段的显示,仅需要图案的轮廓,这样颜色为分段的背景颜色 // NSArray *items = @[[UIImage ...
- ALAsset,ALAssetsLibrary,ALAssetsgroup常见属性及用法
转载自 http://www.cnblogs.com/javawebsoa/archive/2013/07/19/3201246.html ALAssetsgroup --------------- ...
- CSS :first-child 选择器 和 HTML DOM firstChild 属性
CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...
- HTML DOM status 属性
<!DOCTYPE html><html> <head>HTML DOM status 属性</head><body><script ...
- 详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- Dom对象的经常用法
Dom对象的经常用法: (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点 1. 查询给定ID属性值的元素,返回该元素的元素节点.也称为元素对象. ...
- CALayer基本介绍与常见属性
属性框架:QuartzCore CA: CoreAnimation -> 核心动画,所有的核心动画都是添加给layer的! 与UIView的区别: 1.layer负责内容的展示,不接受任何用户交 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- CoreGraphics-线段常见属性及渲染模式介绍
线段常见属性: 1.线宽 2.线头样式 3.接头样式 4.颜色(包括描边颜色和填充颜色) override func draw(_ rect: CGRect) { // 获取图形上下文对象 let c ...
随机推荐
- vlc-android对于通过Live555接收到音视频数据包后的处理分析
通过ndk-gdb跟踪调试vlc-android来分析从连接到RTSP服务器并接收到音视频数据包后的处理过程. 首先,从前面的文章有分析过vlc-android的处理过程通过线程函数Run()(Src ...
- Jquery如何获取控件ID
l 1.#id 用法: $(”#myDiv”); 返回值 单个元素的组成的集合 说明: 这个就是直接选择html中的id=”myDiv” l 2.Element 用法: ...
- 关于ASP.NET 中站点地图sitemap 的使用
在ASP.NET MVC 如此火热的时期,我竟然不适时宜的谈起ASP.NET ,恐怕会引来一阵嘲笑.最为无趣的是,讲解的竟然还是其中的一个控件.oh~~ my god!my out! ^_^ Si ...
- MVC调试异常--未能将脚本调试器附加到计算机
32位机: 解决办法:以管理员身份打开CMD,运行:regsvr32.exe "%ProgramFiles(x86)%\Common Files\Microsoft Shared\VS7De ...
- css多行文本居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- struts2开发经验小结(method="{1}"等)
这里的{1}表示接收前面action里通过通配符传来的值,例如你配置的是<action name="*Crud" class="example.Crud" ...
- lsof-列出当前系统打开文件
root@user:/ # lsof COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE ...
- 安装完CentOS 7 Minimal之后，从头打造桌面工作环境
安装完CentOS 7 Minimal之后,从头打造桌面工作环境 U盘装CentOS 7 DVD版不能引导的解决办法 更改root密码 SSH登录 增加除root之外的常规用户 装完CentOS 7之 ...
- mini-httpd源码分析-mini-httpd.c
main函数分析: 一,参数设置: 读取命令行参数 配置文件参数 读取参数,设置对应的全局变量.主要参数有:配置文件:资源目录:进程ID文件:日志文件:字符集:主机名及端口号... 二,参数处理:重点 ...
- 微软云基础架构Hyper-scale Datacenter
每天醒来,可能很多人的习惯都是打开手机,看看微信,刷刷朋友圈,或者看看新闻,去咖啡店,打开电脑搜索一些关键字,观看视频,电视剧--可是你有没有想过你每一次键盘的敲击,每一次微信的语音的发送,数据会流向 ...