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时,克隆节点及其属性,以及所有后代。

时间: 2024-10-10 02:08:37

DOM常见属性及用法的相关文章

IOS UI segmentedControl UISegmentedControl 常见属性和用法

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

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

转载自  http://www.cnblogs.com/javawebsoa/archive/2013/07/19/3201246.html ALAssetsgroup --------------------------------------------------------------------------- Enumerating Assets(遍历资源) – enumerateAssetsUsingBlock:(用一个block来遍历组里的资源) – enumerateAssets

css3中font-face属性的用法详解

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

HTML DOM innerHTML 属性

定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 语法 tablerowObject.innerHTML=HTML 实例 下面的例子返回了表格行的 inner HTML: 1 <html> 2 <head> 3 <script type="text/javascript"> 4 function getInnerHTML() 5 { 6 alert(document.getElementById("tr

Dom对象的经常用法

Dom对象的经常用法: (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点 1.  查询给定ID属性值的元素,返回该元素的元素节点.也称为元素对象.                2.  由于在一个html页面中id的值是唯一的.所以返回值也是唯一的. 所以方法的名称为getElementById()而不是getElementsById()                3.  该方法仅仅能用于document对象,相似与java的statickeyword.

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

CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有主流浏览器都支持 :first-child 选择器. 注释:对于 IE8 及更早版本的浏览器中的 :first-child,必须声明 <!DOCTYPE>. 定义和用法 :first-chil

HTML DOM status 属性

<!DOCTYPE html><html> <head>HTML DOM status 属性</head><body><script type="text/javascript">window.status="Some text in the status bar!!";</script> </body></html> HTML DOM status 属性 H

UIApplication常见属性与方法总结--ios

UIApplication 1.简介 1> 整个应用程序的象征,一个应用程序就一个UIApplication对象,使用了单例设计模式 2> 通过[UIApplication sharedApplication]访问这个单例对象 2.常见用法     1> 设置图标右上角的红色提示数字 app.applicationIconBadgeNumber = 10; 2> 设置状态栏的样式 app.statusBarStyle = UIStatusBarStyleBlackOpaque; 3

MySQL &#183; 性能优化 &#183; MySQL常见SQL错误用法

前言 MySQL在2016年仍然保持强劲的数据库流行度增长趋势.越来越多的客户将自己的应用建立在MySQL数据库之上,甚至是从Oracle迁移到MySQL上来.但也存在部分客户在使用MySQL数据库的过程中遇到一些比如响应时间慢,CPU打满等情况.阿里云RDS专家服务团队帮助云上客户解决过很多紧急问题.现将<ApsaraDB专家诊断报告>中出现的部分常见SQL问题总结如下,供大家参考. 常见SQL错误用法 1. LIMIT 语句 分页查询是最常用的场景之一,但也通常也是最容易出问题的地方.比如