DOM系统学习-进阶

DOM类型

 Node类型:

常用类型:

​    ​    ​元素节点 ELEMENT_NODE

​    ​    ​属性节点 ATTRIBUTE_NODE

​    ​    ​文本节点 TEXT_NODE

IE不支持节点类型常量名、兼容方案:


1

2

3

4

5

6

if (typeof Node == ‘undefined‘) { //IE 返回

    window.Node = {

        ELEMENT_NODE : 1,

        TEXT_NODE : 3

    };

}

 Document类型:

获取元素

document.documentElement

document.doctype

document.body

属性

document.title

document.URL

document.domian

document.referrer

对象集合

document.forms

document.images

document.anchors 获取带name的a元素

document.links 获取带href的a元素

 Text类型:

同时创建两个同级别的文本节点,会产生分离的两个节点

文本节点合并 box.normalize();

文本节点分割 box.firstChild.splitText(3);

其他方法

deleteData(offset,count) 删除文本数据

insertData(offset,str) 插入文本数据

replaceData(offset,count,str) 替换文本数据

substringData(offset,count) 截取文本数据

DOM扩展

 呈现模式:

标准模式8 CSS1Compat

判断为标准模式 document.documentMode > 7

仿真模式7

混杂模式5 BackCompat

 滚动:

设置指定可见


1

ele.scrollIntoView();

 children属性:

获取子元素节点(去除空白节点)

 contains():

父元素是否包含子元素

DOM操作内容

 innerText:

获取元素内的文本内容,html会过滤

设置元素内的文本内容,hmtl会转义

firefox除外都支持,firefox兼容方法textContent


1

2

3

4

5

6

7

8

9

10

11

12

13

14

function getInnerText(element) {

    if (typeof element.textContent == ‘string‘) {

        return element.textContent;

    else {

        return element.innerText;

    }

}

function setInnerText(element, text) {

    if (typeof element.textContent == ‘string‘) {

        element.textContent = text;

    else {

        element.innerText = text;

    }

}

 innerHTML:

获取元素内的内容,html不过滤

​    ​设置元素内的内容,hmtl会解析,script,style不会解析

 outerText:

和innerText一样,包括自身,不支持firefox

 outerHTML:

和innerHTML一样,包括自身

时间: 2024-10-12 11:45:19

DOM系统学习-进阶的相关文章

DOM系统学习-基础

DOM介绍  DOM介绍: D 网页文档 O 对象,可以调用属性和方法 M 网页文档的树型结构  节点: DOM将树型结构理解为由节点组成.     节点种类: 元素节点.文本节点.属性节点等 查找元素  获取元素: getElementById() getElementsByTagName() querySeletor()  元素节点属性: tagName innerHTML     HTML属性的属性: id title style className     属性操作: getAttrib

关于dom系统学习的基础收录

https://www.sogou.com/link?url=DSOYnZeCC_rR_TP93bdO6A_cUO9C0ZS-5sI-Rgxw98d5UVDCzzIYwbbAp6VRqT6Q https://www.sogou.com/link?url=hedJjaC291P3yGwc7N55kLSc2ls_Ks2xRtmWaBcjt6PvpaTF7f6PT958rDnk-4A0IU0UgoslOxXHqbuwkRLHj63mlRzfPLR2 https://www.sogou.com/link

Tomcat 学习进阶历程之Tomcat架构与核心类分析

前面的http及socket两部分内容,主要是为了后面看Tomcat源码而学习的一些网络基础.从这章开始,就开始实际深入到Tomcat的'内在'去看一看. 在分析Tomcat的源码之前,准备先看一下Tomcat的架构与一些核心类的简单分析,并简单介绍一下Tomcat是如何处理一次Http请求的.这部分内容有相当一部分来源于网络,在此,感谢原作者的贡献. Tomcat的总体架构 Tomcat的架构关系可以从Tomcat的配置文件server.xml中看到端倪. 从上图中可以看出Tomcat 的心脏

HTML DOM(学习笔记二)

嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式,更加接近我们的HTML文档的表现形式的样式是这样的,如下图所示: 在HTML DOM中,所有的事物都是节点.HTML DOM就是被视为节点树的HTML.根据W3C的HTML DOM标准,HTML文档中所有内容都是节点,如上图

最新2019学习路线,零基础怎么系统学习大数据?

大数据技术是指从各种各样类型的巨量数据中,快速获得有价值信息的技术.解决大数据问题的核心是大数据技术.零基础怎么系统学习大数据?首先我们先了解一下什么是大数据. 最新2019学习路线,零基础怎么系统学习大数据?"大数据"是一个体量特别大,数据类别特别大的数据集,并且这样的数据集无法用传统数据库工具对其内容进行抓取.管理和处理.大数据工程师需要学习哪些知识?创一个小群,供大家学习交流聊天如果有对学大数据方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家

必看的Linux系统新手进阶老手心得

必看的Linux系统新手进阶老手心得不知道从什么时候起,linux这个话题变得越来越普及,成为大家经常讨论的话题.无论在网络上还是实际生活中,竟然很多人都在纠结学习linux的问题.网络上给的答案千千万万,而却还有很多人踌躇不前,依然是原地踏步的样子:没有入门的人,问如何入门学习,认为自己入门了的,想知道如何提高自己的水平,成为linux高手.下面本人从几点谈谈我对linux学习的一些进阶心得,希望能够对大家学习有帮助,愿你我共勉,都能成为linux高手. 进阶第一点:积少成多.学习任何知识都是

从零开始系统学习C/C++,C++系统学习路线

C++常用在后端服务器,移动互联网后端,经典Windows界面开发,移动互联网端界面开发,跨平台界面开发,图形分析,系统架构,应用设计,还有现在最为流行的分布架构等一些新的技术领域,C/C++工程师必备知识的思维导图. 从零开始系统学习C/C++,C++系统学习路线一.初级入门阶段 在入门之初,首先要做的是通过C/C++语言的学习培养编程思维和动手能力,深刻理解面向过程和面向对象的思想方法.这个阶段你需要学习: ① C语言 数据类型.变量.内存布局.指针基础: 字符串.一维数组.二维数组: 一级

Linux系统理解以及Linux系统学习心得

原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 说一下我对Linux系统的理解 1.加载Linux内核准备:在加载基本输入输出模块(BIOS)之后,从磁盘的引导扇区读入操作系统的代码文件块到内存中,之后开始整个系统的初始化. 2.main.c的start_kernel函数是整个操作系统的入口,这也与Linux是基于C语言的特性相符,start_kernel具体做的动作很多

如何系统学习java体系?

如何系统学习java体系? | 浏览:1248 | 更新:2013-08-26 14:56 | 标签:java 1 2 3 4 分步阅读 Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,它在工业界应用非常广泛,掌握好java这门技术,你能轻松找一份java程序员的工作. 工具/原料 一些书.一台电脑 方法/步骤 学java首先你要学 J2SE,它是java体系的基础,也是重中之重.很多人往往不重视基础,其实这是舍本逐末的做法.说这么多就是希望大家能重视基础,能在这条路上走的更远.