一、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. PHP系列 | [转] PHP中被忽略的性能优化利器：生成器

    官方:https://www.php.net/manual/zh/language.generators.overview.php 原文:https://segmentfault.com/a/1190 ...

  2. vue路由的异步加载(懒加载)方法

    vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router  阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...

  3. Set JAVA_HOME in windows cmd(在windows 命令行中修改JAVA_HOME)

    set JAVA_HOME=jrepathset PATH=%JAVA_HOME%\bin;%PATH%注意这里没有引号.这样就不需要在我的电脑属性中修改java_home了,以及重启命令行了.对于程 ...

  4. odoo开发笔记 -- odoo权限管理

    odoo框架 整体权限可以分为4个级别: (1) 菜单级别: 不属于指定菜单所包含组的用,看不到相应菜单.不安全,只是隐藏菜单,若用户知道菜单ID,仍然可以通过指定URL访问(2) 对象级别: 对某个 ...

  5. FineReport简单部署

    一.部署方式 1.官网发布包部署 2.自定义tomcat部署 二.发布包部署 1.下载一个发布包:https://www.finereport.com/product/download 解压后打开bi ...

  6. ShoeBox一个超级好用的图片切割工具

    下载地址:http://renderhjs.net/shoebox/ ShoeBox是一个图片处理软件,体积很小. 我主要用第三个功能拆开图片.根据大图上的小图空白间隙来处理的. 导出后变成很多小图

  7. dotnet core 项目脚手架这种小事嘛...

    dotnet core脚手架批处理.bat @echo 请修改批处理文件名后,如:Example.Core ,注释掉goto end,再执行脚本 pause goto end ::goto end s ...

  8. git之github配置

    1.安装好git以后,我们配置git秘钥,首先输入下面的命令: 2.接着上述操作,一路回车按键.如图所示:生成了秘钥,, 如下图,就是秘钥了: 3.我们打开注册好的github地址.找到ssh选项,将 ...

  9. NuxtJS实战，一个博客系统

    前言 这个项目诞生于17年5月,距今已有两年多了,在这两年期间经历了很多变更,从简单到复杂,又从复杂到简单,并且以后一直会保持这种简单状态.最近迎来了一次更新,因此特意分享一下.虽然只有我一个人使用( ...

  10. Java泛型之通配符

    原文点此链接 使用通配符的原因:Java中的数组是协变的,但是泛型不支持协变. 数组的协变 首先了解下什么是数组的协变,看下面的例子: Number[] nums = new Integer[10]; ...