一、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. SpringBoot项目从Git拉取代码并完成编译打包启动的sh自动脚本

    操作步骤: 1.进入/home/servers/codes/xxxx-dev/目录,从git上将项目clone下来: 2.确保/usr/local/xxx/xxxx-dev目录存在: 3.确保sh脚本 ...

  2. IfcBeam属性

    IfcBeam属性和结构 <xs:element name="IfcBeam" type="ifc:IfcBeam" substitutionGroup= ...

  3. 查找算法(4)--Fibonacci search--斐波那契查找

    1.斐波那契查找 (1)说明 在介绍斐波那契查找算法之前,我们先介绍一下很它紧密相连并且大家都熟知的一个概念——黄金分割. 黄金比例又称黄金分割,是指事物各部分间一定的数学比例关系,即将整体一分为二, ...

  4. 词向量 词嵌入 word embedding

    词嵌入 word embedding embedding 嵌入 embedding: 嵌入, 在数学上表示一个映射f:x->y, 是将x所在的空间映射到y所在空间上去,并且在x空间中每一个x有y ...

  5. 小于K的两数之和

    给你一个整数数组 A 和一个整数 K,请在该数组中找出两个元素,使它们的和小于 K但尽可能地接近 K,返回这两个元素的和. 如不存在这样的两个元素,请返回 -1. 示例1: 输入:A = [34,23 ...

  6. linux那些事儿

    Linux只是一个操作系统内核而已,而GNU提供了大量的自由软件来丰富在其之上的各种应用程序.我们常说的linux实际是GNU/Linux,GNU是一个自由的操作系统.绝大多数基于Linux内核的操作 ...

  7. [K8s] Kubernetes 是什么 不是什么

    现在有三种部署方式,传统物理机部署.虚拟机部署.容器化部署. 我们现在所使用的云上服务器一般都是虚拟化出来的,硬件资源独立,操作系统等软件资源亦独立. 容器化的好处是更轻量,复用下层的操作系统,相当于 ...

  8. DRF概述

    目录 一. REST 1. 什么是编程? 2. 什么是REST? 二. 知识准备 1. CBV(class based view) 2. 类方法 classmethod和classonlymethod ...

  9. 一款新的好用的SSH工具——FinalShell

    FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求.特色功能:免费海外服务器远程桌面加速,ssh加速,双边tcp加速,内网穿 ...

  10. [转帖]NSO到底是个什么样的公司？揭秘三叉戟0day的缔造者

    NSO到底是个什么样的公司?揭秘三叉戟0day的缔造者 dawner2016-09-07共248912人围观 ,发现 3 个不明物体其他安全报告 https://www.freebuf.com/art ...