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. sql必知必会(第四版) 学习笔记二 视图

    本书用到的几个表的建表sql语句如下: --销售产品供应商 CREATE TABLE Vendors ( vend_id varchar(20) not null, vend_name varchar ...

  2. cc1plus: fatal error: emeralddb-pmdMain.d: No such file or directory

    签名autoscan, aclocal, config啥的都没错,最后make 报下面的错,查了各个文件没发现有啥问题,请哪位帮忙卡看 make[1]: Entering directory `/ro ...

  3. linq读书笔记3-操作符之select与selectmany

    linq对数据的查询方式的表达形式主要有两种: var demo =from p in pList where p.id=*** select p; var demo =pList.where(p=& ...

  4. oracle 数据库学习

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

  5. MapXtreme在asp.net中的使用之加载地图(转)

    MapXtreme在asp.net中的使用之加载地图(转) Posted on 2010-05-04 19:44 Happy Coding 阅读(669) 评论(0) 编辑 收藏 1.地图保存在本地的 ...

  6. 初始seajs

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制 SeaJS本身遵循KISS(Keep It Simple, Stupid ...

  7. 引用 - PHP手册笔记

    引用是什么 PHP中的引用意味着,用不同的变量名访问同一变量内容,类似于Unix的文件名和文件本身(变量名是目录条目,变量内容是文件本身,即用不同的目录条目访问同一文件),可以看做Unix文件系统中的 ...

  8. 为什么我们需要性能测试，需要loadrunner

    什么是功能: 功能按我理解就是软件实现需求,提供服务,那么功能测试就是实现的需求是否与客户给定需求一致,也就是符合预期结果 什么是性能: 功能是实现需求,提供服务,那么性能就可以理解为服务的好坏.比如 ...

  9. TIANKENG’s restaurant--hdu4883

    TIANKENG’s restaurant Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/O ...

  10. externn "C"解析

    1.揭密extern "C" extern "C"包含双重含义,从字面上即可得到:首先,被它修饰的目标是 "extern”的:其次,被它修饰的目标是 ...