一、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. linux下使用clamav排查病毒

    clamav wget http://www.clamav.net/downloads/production/clamav-0.102.0.tar.gz ### Installyum -y insta ...

  2. 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

    声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...

  3. Hive的两种操作模式

    Hive的客户端操作 Hive的客户端操作 通过JDBC操作Hive 通过Thrift操作Hive 通过JDBC操作Hive 首先 Hive 启动远程服务 hive --service hiveser ...

  4. python工程设置工具（pipenv）

    原始安装 pip工具 --- 包安装工具, 可以从Python包索引hub上安装,也可以使用自定义的hub. 命令: pip install xxx 缺点: 1.命令方式, 一次只能安装一个包, 对于 ...

  5. ABAP基础篇1 内表

    内表类型 abap 内表类型有三种: 标准表(一般ABAP程序中用的最多就是这种表) 系统为该表的每一行数据生成一个逻辑索引,自己内部维护着行号(Index)的编码.表的键值不唯一,且没有按照表键自动 ...

  6. [Linux.centOS].安装Redis 腾讯云

    环境 { "服务器运营商":"腾讯云", "操作系统":"CentOS 7.5 64位", "CPU" ...

  7. 大数据 -- Hadoop集群环境搭建

    首先我们来认识一下HDFS, HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.它其实是将一个大文件分成若干块保存在不同服务器的多个节点中.通过联网 ...

  8. linux 系统应用程序桌面图标显示及自启动

    cp test.desktop $RPM_BUILD_ROOT/usr/share/applications/    桌面显示 cp test.desktop $RPM_BUILD_ROOT/etc/ ...

  9. ASP.NET Core 之跨平台的实时性能监控

    前言 前面我们聊了一下一个应用程序 应该监控的8个关键位置. . 嗯..地址如下: 应用程序的8个关键性能指标以及测量方法 最后卖了个小关子,是关于如何监控ASP.NET Core的. 今天我们就来讲 ...

  10. XLNet and Robertra

    XLNET         But the AE language model also has its disadvantages. It uses the [MASK] in the pretra ...