1、节点的概念

页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点。

2、节点相关的属性

2.1、节点分类

**标签节点:**比如 div 标签,p 标签等。

**属性节点:**比如 class,value 等。

**文本节点:**比如闭合标签中的文本内容。

2.2、节点属性

nodeType:节点的类型,它的值有 1,2,3 三种。

​ 标签节点:值为 1

​ 属性节点:值为 2

​ 文本节点:值为 3

nodeName:节点的名字

​ 标签节点:大写的标签名字

​ 属性节点:小写的属性名字

​ 文本节点:#text

nodeValue:节点的值

​ 标签节点:null

​ 属性节点:属性的值

​ 文本节点:文本内容

注:用节点属性来确定并获取标签元素。例如如下代码。

获取节点然后判断是否是p标签节点。

if((nodes[i].nodeType === 1) && (nodes[i].nodeName === "P")) {
        nodes[i].style.backgroundColor = "blue";
}

3、元素的属性

3.1属性的方法

1,//而是要 获取标签里里面的自定义属性。

var score = this.getAttribute("score");
//不能通过 this.score 来获取。因为dom对象中没有这个 score 属性。

2,移除元素自带的还有自定义的属性

my$("dv").removeAttribute("score");
my$("dv").removeAttribute("class");

3,设置自定义属性

ist[0].setAttribute("score","10");
list[1].setAttribute("score","50");         //score= 50;
list[2].setAttribute("score","100");
var score = this.getAttribute("score");
alert(score);

boxObj.attributes; // 返回元素所有属性集合对象
boxObj.attributes.length;//返回属性节点个数、
boxObj.attributes[0]; //返回第一个属性节点 (id="first")
boxObj.attributes['id']; //返回属性为 id 的节点

**注意:**getAttribute的获取属性只能是行内样式才可以。

如 style 在行内样式可以使用 boxObj.style.color 获取到,如果是外部样式是获取不到的,但是设置可以。

外部样式获取使用 :window.getComputedStyle(boxObj)["color"]

但是 IE8 不支持。

封装获取任意元素的任意一个属性值

function getStyle(element, attr) {
return window.getComputedStyle ?
window.getComputedStyle(element, null)[attr] :
element.currentStyle[attr];
}

4、获取节点和元素的12行代码

父元素 父节点 子元素 子节点 兄弟元素 兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>比较全的获取相关节点</title>
</head>
<body>
<div id="dv">
<p id="pid">p标签</p>
<span>span标签</span>
<ul id="uu">
<li>li标签
<span>ni</span>
</li>内
<li>li标签</li>存
<li id="three">li标签</li>知己
<li>li标签</li>天涯
<li>li标签</li>若比邻
</ul>
</div> <script src="common.js"></script>
<script>
var ulObj = my$("uu");
// 父节点
console.log(ulObj.parentNode);
// 父元素
console.log(ulObj.parentElement);
// 子节点
console.log(ulObj.childNodes);//11
// 子元素
console.log(ulObj.children);//5 // ------------------------------------------------
// 第一个子节点
console.log(ulObj.firstChild);//#text
// 第一个子元素
console.log(ulObj.firstElementChild);
// 最后一个子节点
console.log(ulObj.lastChild);
// 最后一个子元素
console.log(ulObj.lastElementChild);
// 某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
// 某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
// 某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
// 某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling); // 1、以上前四个,chrome, firefox, IE8 都支持 // 2、后面八个,chrome,firefox支持,IE8下,所有获取节点的操作都获取的是元素,所有获取元素的操作都是 undefined。 </script>
</body>
</html>

5,创建元素的三种方法

方式一

document.write("标签代码及内容");

缺陷:如果是在页面加载完毕后,通过这种方式创建元素的话,页面上的除此创建元素之外的所有内容都会被清除。但是在页面加载的时候不会。

方式二

标签.innerHTML = "标签代码及内容";

方式三

第一步:创建元素,返回值为一个对象元素

document.creatElement("标签的名字");

第二步:将元素追加到父元素中

父元素.appendChild(创建的对象);

2、DOM元素增删改查

appendChild(ele):追加元素ele

insertBefore(newEle, oldEle): 在oldEle元素前添加newEle

removeChild(ele):删除元素ele(或者子元素自杀 ele.remove();

replaceChild(newEle, oldEle):将oldEle修改为newEle元素

注意:内容摘录自:https://github.com/Daotin/Web/tree/master/04-DOM

若想详细了解,请跳转到此连接。

 

DOM-节点概念-属性的更多相关文章

  1. DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >

    http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...

  2. DOM节点的属性和方法

    DOM DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model).它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行 ...

  3. HTML DOM节点

    在 DOM 树中,基本上一切都是节点.每个元素在最底层上都是 DOM 树中的节点.每个属性都是节点.每段文本都是节点.甚至注释.特殊字符(如版权符号 ©).DOCTYPE 声明(如果 HTML 或者 ...

  4. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  5. DOM的概念及子节点类型

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  6. DOM的概念及子节点类型【转】

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  7. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  8. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  9. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  10. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

随机推荐

  1. 2019年一次java知识点总结

    java基础 数据类型 集合与数据结构 关键字(static,rty ...) IO和网络 多线程(并发与锁,死锁) 异常 简单算法,复杂度 JVM 类加载 java内存模型 对象监听器字节码 垃圾回 ...

  2. webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

    全局安装webpack npm install -g webpack 把node_global加入到环境变量

  3. 项目实战-使用PySpark处理文本多分类问题

    原文链接:https://cloud.tencent.com/developer/article/1096712 在大神创作的基础上,学习了一些新知识,并加以注释. TARGET:将旧金山犯罪记录(S ...

  4. 方法总结:如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...

  5. AWS S3服务使用

    AWS S3是亚马逊的一种文件存储服务使用方便. 一.配置服务 public static class AWS_S3ClientInfo { private static readonly strin ...

  6. 关于Hbase开启snappy压缩

    版本:自己编译的hbase-1.2.0-cdh5.14.0 默认情况下,Hbase不开启snappy压缩 , 所以在hbase的lib/native目录下什么也没有(我的前提是执行hadoop che ...

  7. Docker 学习3 Docker镜像管理基础

    一.docker 常用操作及原理 1.docker 常用操作 2.docker 机制 1.docker client端是通过http或者https与server端通信的.个 2.docker 镜像可以 ...

  8. mapreduce项目中加入combiner

    combiner相当于是一个本地的reduce,它的存在是为了减少网络的负担,在本地先进行一次计算再叫计算结果提交给reduce进行二次处理. 现在的流程为: 对于combiner我们有这些理解: M ...

  9. jmeter主要函数助手功用说明

    jmeter中虽然有很多的插件,但是有些需要安装,有些具有一定的局限性.函数助手是一个快捷的工具库.下面记录一下函数助手中一些主要的函数的使用方法. 注:不内容中所有的实例均基于3.2记录 1._Be ...

  10. VSTO 函数InStrRev

    返回某一字符串从另一字符串的右侧开始算起第一次出现的位置. 参数 StringCheck 类型:System.String 必选. 搜索的 String 表达式. StringMatch 类型:Sys ...