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. LeetCode第二十一题-对两个有序链表排序

    Merge Two Sorted Lists 问题简介:合并两个已排序的链表并将其作为新链表返回 举例: 输入: 1->3->5, 1->2->4 输出: 1->1-&g ...

  2. Windows安装docker (带安装包)

    docker安装包链接 链接:https://pan.baidu.com/s/1JBk8GCH6j_WeGdoaUuIoWw 提取码:8kgg 我电脑上有了git所以没有勾选最后一个 安装完成后将此目 ...

  3. Django_路由详

    动态路由和动态参数捕获 动态路由:url支持正则表达式, 访问的url能够匹配成功就去执行对应的视图函数 捕获参数: # 捕获参数,位置传参 url(r'^data/([0-9]{4})/([0-2] ...

  4. 解析查询 queryString 请求参数的函数

    quety string 请求参数 本质上可以理解为一种序列化的格式,与 json 类似,它是一种字典类型的容器,里面可以保存键值对(key-value pair).只不过 querystring 这 ...

  5. 05mycat父子表

    表连接的难题在mycat中是不允许跨分片做表连接查询的 创建t_orders表 create table t_orders( id int PRIMARY key, customer_id int n ...

  6. requests库写接口测试框架初学习

    学习网址:    https://docs.microsoft.com/en-us/openspecs/windows_protocols/ms-dscpm/ff75b907-415d-4220-89 ...

  7. 详解MariaDB数据库的索引

    1.什么是索引 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针. 更通俗的说,数据库索引好比是一本书前面的目录,在查找内容之前可以先在 ...

  8. bzoj 3998

    我们分成两种情况来分析这个问题:t=0和t=1 t=1时,每一个子串出现的次数就是他在parent树上所在子树内前缀节点的个数,这一点我们已经说的很清楚了 利用SAM有向无环的性质,我们可以在pare ...

  9. Angular2 ng2 如何配置惰性加载

    需要修改至少四个地方1. 将子组件进行模块化操作2.生成子组件module .子组件router3.配置主路由 信息 改为loadChild4.配置appModule 删除引入 以product组件 ...

  10. javaScript -- touch事件详解(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...