DOM-节点概念-属性
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-节点概念-属性的更多相关文章
- DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >
http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...
- DOM节点的属性和方法
DOM DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model).它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行 ...
- HTML DOM节点
在 DOM 树中,基本上一切都是节点.每个元素在最底层上都是 DOM 树中的节点.每个属性都是节点.每段文本都是节点.甚至注释.特殊字符(如版权符号 ©).DOCTYPE 声明(如果 HTML 或者 ...
- DOM节点属性
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- DOM的概念及子节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- DOM的概念及子节点类型【转】
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- DOM中元素节点、属性节点、文本节点
DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...
- DOM中元素节点、属性节点、文本节点的理解
DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
随机推荐
- 2019年一次java知识点总结
java基础 数据类型 集合与数据结构 关键字(static,rty ...) IO和网络 多线程(并发与锁,死锁) 异常 简单算法,复杂度 JVM 类加载 java内存模型 对象监听器字节码 垃圾回 ...
- webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
全局安装webpack npm install -g webpack 把node_global加入到环境变量
- 项目实战-使用PySpark处理文本多分类问题
原文链接:https://cloud.tencent.com/developer/article/1096712 在大神创作的基础上,学习了一些新知识,并加以注释. TARGET:将旧金山犯罪记录(S ...
- 方法总结:如何实现html页面自动刷新
使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...
- AWS S3服务使用
AWS S3是亚马逊的一种文件存储服务使用方便. 一.配置服务 public static class AWS_S3ClientInfo { private static readonly strin ...
- 关于Hbase开启snappy压缩
版本:自己编译的hbase-1.2.0-cdh5.14.0 默认情况下,Hbase不开启snappy压缩 , 所以在hbase的lib/native目录下什么也没有(我的前提是执行hadoop che ...
- Docker 学习3 Docker镜像管理基础
一.docker 常用操作及原理 1.docker 常用操作 2.docker 机制 1.docker client端是通过http或者https与server端通信的.个 2.docker 镜像可以 ...
- mapreduce项目中加入combiner
combiner相当于是一个本地的reduce,它的存在是为了减少网络的负担,在本地先进行一次计算再叫计算结果提交给reduce进行二次处理. 现在的流程为: 对于combiner我们有这些理解: M ...
- jmeter主要函数助手功用说明
jmeter中虽然有很多的插件,但是有些需要安装,有些具有一定的局限性.函数助手是一个快捷的工具库.下面记录一下函数助手中一些主要的函数的使用方法. 注:不内容中所有的实例均基于3.2记录 1._Be ...
- VSTO 函数InStrRev
返回某一字符串从另一字符串的右侧开始算起第一次出现的位置. 参数 StringCheck 类型:System.String 必选. 搜索的 String 表达式. StringMatch 类型:Sys ...