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 : ...
随机推荐
- LeetCode第二十一题-对两个有序链表排序
Merge Two Sorted Lists 问题简介:合并两个已排序的链表并将其作为新链表返回 举例: 输入: 1->3->5, 1->2->4 输出: 1->1-&g ...
- Windows安装docker (带安装包)
docker安装包链接 链接:https://pan.baidu.com/s/1JBk8GCH6j_WeGdoaUuIoWw 提取码:8kgg 我电脑上有了git所以没有勾选最后一个 安装完成后将此目 ...
- Django_路由详
动态路由和动态参数捕获 动态路由:url支持正则表达式, 访问的url能够匹配成功就去执行对应的视图函数 捕获参数: # 捕获参数,位置传参 url(r'^data/([0-9]{4})/([0-2] ...
- 解析查询 queryString 请求参数的函数
quety string 请求参数 本质上可以理解为一种序列化的格式,与 json 类似,它是一种字典类型的容器,里面可以保存键值对(key-value pair).只不过 querystring 这 ...
- 05mycat父子表
表连接的难题在mycat中是不允许跨分片做表连接查询的 创建t_orders表 create table t_orders( id int PRIMARY key, customer_id int n ...
- requests库写接口测试框架初学习
学习网址: https://docs.microsoft.com/en-us/openspecs/windows_protocols/ms-dscpm/ff75b907-415d-4220-89 ...
- 详解MariaDB数据库的索引
1.什么是索引 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针. 更通俗的说,数据库索引好比是一本书前面的目录,在查找内容之前可以先在 ...
- bzoj 3998
我们分成两种情况来分析这个问题:t=0和t=1 t=1时,每一个子串出现的次数就是他在parent树上所在子树内前缀节点的个数,这一点我们已经说的很清楚了 利用SAM有向无环的性质,我们可以在pare ...
- Angular2 ng2 如何配置惰性加载
需要修改至少四个地方1. 将子组件进行模块化操作2.生成子组件module .子组件router3.配置主路由 信息 改为loadChild4.配置appModule 删除引入 以product组件 ...
- javaScript -- touch事件详解(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...