一、Document类型    document实例
1、常用的一些属性
documentElement　　 始终指向HTML页面中的<html>元素。
body 　　直接指向<body>元素
title　　 获取文档的标题
images　　 获取所有的img对象    【返回类数组对象】
forms　　 获取所有的form对象    【返回类数组对象】
links　　 获取文档中所有带href属性的<area>和<a>元素
referrer 　　取得链接到当前页面的那个页面的URL    【即来源页面的URL】
URL 　　取得完整的文档URL
domain　　 取得域名，并且可以进行设置，在跨域访问中经常会用到。【返回文档服务器的域名】

2、查找HTML中的元素
getElementById('id')    通过元素id查找
使用下面三种方式获取元素【返回的为类数组对象，需要使用数组下标选择单个相应的元素】
document.getElementsByTagName('标签名')    通过标签名查找
document.getElementsByClassName('类名')    通过类名查找
document.getElementsByName('name属性值')        通过元素属性name查找
document.querySelectorAll('css选择器')        通过css选择器来查找

3、添加和删除元素
document.createElement(element)     创建元素
document.removeChild(element)     删除元素
document.appendChild(element)     添加元素
document.replaceChild(element)     替换元素
document.write(text)     写入输出流，在浏览器上显示文本(text)内容

二、Element类型    元素节点类型【下面使用的element表示我们所选取的元素节点】
1、获取属性值
element.属性名    【返回的是js对象(style)或相应的js函数(事件函数)】
element.getAttribute("属性名")【返回的是css中包含的文本(style)或相应函数名字符串(事件函数名)】
eg:

    //指定div的style属性  初始style = 'color:coral;';

    console.log(div.getAttribute('style'));        //字符串：color: coral

    console.log(div.style);        //js对象：CSS2Properties { color → "coral" }

    //指定div的事件点击函数onclick()

    console.log(div.onclick);    //js函数：function onclick()

    console.log(div.getAttribute('onclick'));    //相应事件函数名：test()

2、设置属性值
element.属性名 = "属性值";
element.setAttribute("属性名","属性值");

3、删除属性
element.removeAttribute("属性名");

4、设置css样式：【设置style中属性值时（只能获取或设置元素内联的style中的属性）,带有-连接的属性名其不能识别一般使用相应的驼峰命名来获取】
element.style.color = "coral";    //设置元素的字体颜色为珊瑚色
element.style.backgroundColor = 'red'    //设置元素的背景颜色为红色 background-color使用backgroundColor代替

5、attributes属性    【返回的为元素节点的所有属性节点组成的类数组对象】
getNamedItem(name) 　　返回nodeName属性等于name的属性节点
removeNamedItem(name)　　 从列表中删除nodeName属性等于name的属性节点
setNamedItem(node) 　　向列表中添加一个属性节点
item(pos) 　　返回位于数字pos位置处的属性节点，类似于使用attributes[pos]
    
6、获取相应的元素节点【忽视其他节点，只考虑元素节点，对于有孩子的元素节点使用】
element.firstElementChild　　第一个孩子元素节点
element.lastElementChild　　最后一个孩子元素节点
element.nextElementSibling　　下一个兄弟元素节点
element.previousElementSibling　　上一个兄弟元素节点
element.childElementCount　　子元素的数量，返回值和children.length值相等

7、元素内容
a、innerHTML　　返回元素内容
eg:

    div.innerText = '<span>span</span>';    //无法解析相应的文本内容

    console.log(div.innerText);    //获取了去掉回车换行的文本内容    【只输出文本内容】 <span>span</span>

b、innerText　　元素内部的文本，去除回车和换行
eg:

    div.innerHTML = '<span>span</span>';    //可以解析内容里面的HTML标签代码

    console.log(div.innerHTML);    //获取内部内容    【字符串输出】    span

c、textContent　　元素内部的文本，不去除空格和回车
eg:

    console.log(div.textContent); //获取带有回车换行的文本内容

添加元素内容两种方式：【innerHTML添加元素内容时无法识别换行】
a、使用字符串拼接
eg:

    div.innerHTML = '<div>'+

                    '<span>hello world</span>'+

                '</div>';

b、使用一对反引号【`】包裹
eg:

    div.innerHTML = `<div>

                        <span>hello world</span>

                     </div>

                    `;

三、Text类型    文本节点    【下面使用的text表示我们所选取的元素节点】
1、文本类型的相关属性及方法
a、属性
text.length　　//文本长度
b、方法
text.appendData(要追加的文本内容) 　　//追加文本
text.deleteData(开始删除的索引,要删除的数量)　　 //删除文本
text.insertData(开始插入的索引,要插入的文本) 　　//插入文本
text.replaceData(开始替换的索引,替换的数量,要插入的文本)　　 //替换文本
text.splitText(分割文本的索引) 　　//将当前文本节点分成两个文本节点
text.document.createTextNode(要插入节点中的文本)　　 //创建文本节点
text.substringData(开始截取的索引,子串的长度)　　 //截取文本的指定子串

四、Comment类型        注释节点

js文本对象模型[DOM]【续】(Node节点类型)的更多相关文章

  1. javascript之DOM（一节点类型Node）

    DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推 ...

  2. 第10章 文档对象模型DOM 10.1 Node节点类型

    DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) .DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM 脱胎于Netscape 及微软公司创始 ...

  3. js文本对象模型【DOM】(十一)

    一.W3C DOM 标准被分为 3 个不同的部分:1.Core DOM - 所有文档类型的标准模型[)Document--> 9;Element -->1;TextNode -->3 ...

  4. 第10章 文档对象模型DOM 10.3 Element类型

    Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回 ...

  5. 第10章 文档对象模型DOM 10.2 Document类型

    Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示 ...

  6. DOM模型结构——节点类型

  7. 第十章—DOM(0)—NODE类型

    DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素, ...

  8. 文本对象模型（Document Object Model）

    本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...

  9. 深入理解DOM节点类型第二篇——文本节点Text

    × 目录 [1]特征 [2]空白 [3]属性[4]方法[5]性能 前面的话 文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点.该节点简单直观,本文将详细介绍该部分内容 特征 文本节点 ...

随机推荐

  1. dubbo源码分析- 集群容错之Cluster（一）

    1.集群容错的配置项 failover - 失败自动切换,当出现失败,重试其他服务器(缺省),通常用于读操作,但重试会带来更长的延时. failfast - 快速失效,只发起一次调用,失败立即报错.通 ...

  2. grpc使用记录(一) gRPC编译(mscv/gcc)

    目录 1.编译前的准备工作 2.Windows下使用VS2019编译 2.1.使用cmake生成VS2019解决方案 2.2.使用msbuild工具进行编译 3.linux下编译 3.1 CentO ...

  3. 我的node-webkit笔记

    话不多说,直接上码: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. log配置文件log4j.propeties（配置保存日志文件的相对路径）

    log配置文件log4j.propeties(配置保存日志文件的相对路径) log4j.propeties文件: #日志的4种级别ERROR(错误).WARN(警告潜在的错误).INFO(粗粒度信息) ...

  5. google cloud storage products

    https://cloud.google.com/products/storage/ BigTable Cloud Bigtable 是 Google 面向大数据领域的 NoSQL 数据库服务.它也是 ...

  6. python基础】——python添加模块搜索路径和包的导入

    方法一:函数添加1 import sys2 查看sys.path3 添加sys.path.append("c:\\") 方法二:修改环境变量w用户可以修改系统环境变量PYTHONP ...

  7. Nginx打印json日志

    1.修改配置,在http{}中添加 log_format access_json '{"@timestamp":"$time_iso8601",' '" ...

  8. 上传下载execl

    ajax上传execl + easyexecl解析execl <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  9. RabbitMQ中文文档PHP版本(三)--工作队列

    2019年12月10日09:57:52 原文:https://www.rabbitmq.com/tutorials/tutorial-two-php.html

  10. nodejs调试工具 node-inspect

    1.安装 npm install -g node-inspect 2.chrome设置 chrome://flags/#enable-devtools-experiments 3.测试 测试代码mai ...