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常见属性及用法的更多相关文章

  1. IOS UI segmentedControl UISegmentedControl 常见属性和用法

    UISegmentedControl中一些常见的属性和用法 //设置以图案作为分段的显示,仅需要图案的轮廓,这样颜色为分段的背景颜色 //    NSArray *items = @[[UIImage ...

  2. ALAsset,ALAssetsLibrary,ALAssetsgroup常见属性及用法

    转载自  http://www.cnblogs.com/javawebsoa/archive/2013/07/19/3201246.html ALAssetsgroup --------------- ...

  3. CSS :first-child 选择器 和 HTML DOM firstChild 属性

    CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...

  4. HTML DOM status 属性

    <!DOCTYPE html><html> <head>HTML DOM status 属性</head><body><script ...

  5. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  6. Dom对象的经常用法

    Dom对象的经常用法: (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点 1.  查询给定ID属性值的元素,返回该元素的元素节点.也称为元素对象.        ...

  7. CALayer基本介绍与常见属性

    属性框架:QuartzCore CA: CoreAnimation -> 核心动画,所有的核心动画都是添加给layer的! 与UIView的区别: 1.layer负责内容的展示,不接受任何用户交 ...

  8. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  9. CoreGraphics-线段常见属性及渲染模式介绍

    线段常见属性: 1.线宽 2.线头样式 3.接头样式 4.颜色(包括描边颜色和填充颜色) override func draw(_ rect: CGRect) { // 获取图形上下文对象 let c ...

随机推荐

  1. eclipse美化,全黑eclipse 保护眼睛

    如标题,闲话不多说.有图说明一切.看看这是你想要的嘛? 教程及资源下载地址: http://download.csdn.net/detail/shoneworn/8326097

  2. oracle 数据库学习

    1.更改数据库用户名密码: alter user '用户名' identified by ’password'. 2.查看数据库有哪些用户:sqlplus system/password ;selec ...

  3. U - stl 的 优先队列 Ⅰ

    Description Given m sequences, each contains n non-negative integer. Now we may select one number fr ...

  4. commands - `for`

    internal variable of separator: IFS

  5. shopnc 导出Excel数据问题实例 && ajax 获取当前值并传递

    任务:从商家中心导出数据,各个商品所属情况. 商品导出到Excel文件功能 /导出exel 功能make-in-lemon public function createExcelOp(){ $mode ...

  6. STM32F051关于printf函数在串口打印中的使用

    1.需要在Options for Target -> Code Generation 中勾选Use MicroLIB: 2.需要加入下面这个函数: int fputc(int ch, FILE ...

  7. 在Azure Cloud Service中部署Java Web App(2)

    接上文. 9.在进行发布之前,需要对我们的订阅做一些设置,因为默认情况下,Azure的service end指向的是Azure global的站点,如果我们要将服务发布在Azure的中国站点,需要做下 ...

  8. 为什么在DllMain里不能调用LoadLibrary和FreeLibrary函数?

    为什么在DllMain里不能调用LoadLibrary和FreeLibrary函数? MSDN里对这个问题的答案十分的晦涩.不过现在我们已经有了足够的知识来解答这个问题.考虑下面的情况:       ...

  9. ssh伪登陆执行远程主机脚本命令 C程序基于ssh passwordless执行远程主机命令及基于配置文件的验证伪登陆执行命令

    1,基于有密码及免秘钥在远程主机上执行命令及脚本 ssh -T ip "CLI or shell.sh"; 2,C程序实现上述功能--基于password-less

  10. OpenStack IdentityService Keystone V3 API Curl实战

    v3 API Examples Using Curl <Tokens> 1,Default scope 获取token Get an token with default scope (m ...