图片 4

DOM Element节点类型详细明白

2015/09/21 · HTML5 ·
DOM

正文笔者: 伯乐在线 –
韩子迟
。未经小编许可,幸免转发!
招待出席伯乐在线 专栏小编。

上文中大家讲明了 DOM
中最重视的节点类型之黄金时代的 Document 节点类型,本文大家世袭浓郁,谈谈另八个入眼的节点类型 Element 。

1.dom指标的innerText和innerHTML有何样界别?

  • innerText:文本格式插入
  • innerHTML:支持HTML插入,解析HTML标签

DOM成分的attribute和property相当的轻松混倄在一块儿,分不清楚,两个是例外的事物,不过两个又关联紧凑。非常多菜鸟朋友,也囊括早先的自身,平日会搞不清楚。

DOM

图片 1

一张图告诉您如何是DOC

1、概况


Element 类型用于表现 HTML 或 XML
成分,提供了对成分标具名、子节点及特色的访谈。 Element
节点有所以下特点:

  1. nodeType 的值为 1
  2. nodeName 的值为要素的标签字
  3. nodeValue 的值为null
  4. parentNode 可能是 Document 或者 Element
  5. 其子节点恐怕是 ElementTextCommentProcessingInstructionCDATASection 或者 EntityReference

要拜候成分的标签名,能够用 nodeName 属性,也足以用 tagName 属性;那多少个属性会重回相仿的值。
HTML 中,标签名始终都是全方位大写表示,而在 XML(有的时候候也席卷
XHTML卡塔 尔(阿拉伯语:قطر‎中,标签字始终和源代码中保持黄金年代致。
万豆蔻梢头你不明确本身的台本将会在
HTML 依旧 XML
文档中执行,最棒还是在可比前边将标具名转换来相像的抑扬顿挫写格局:

JavaScript

var myDiv = document.querySelector(‘div’); console.log(myDiv.tagName);
// DIV console.log(myDiv.nodeName); // DIV if
(myDiv.tagName.toLowerCase() === ‘div’) { // 那样最佳,适用于此外文书档案 //
… }

1
2
3
4
5
6
7
var myDiv = document.querySelector(‘div’);
console.log(myDiv.tagName);  // DIV
console.log(myDiv.nodeName);  // DIV
 
if (myDiv.tagName.toLowerCase() === ‘div’) { // 这样最好,适用于任何文档
  // …
}

2.elem.children和elem.childNodes的区别?

  • element.children
    获取的是时下因素的装有子节点成分(不满含文件成分卡塔尔,children重返的是HTMLCollection类型
  • element.childNodes
    获取的是现阶段因素的有所子成分(节点成分和文书成分卡塔尔国,childNodes再次来到的是NodeList类型

attribute翻译成汉语术语为“个性”,property翻译成普通话术语为“属性”,从汉语的字面意思来看,确实是有一些分别了,先来说说attribute。

概念

Document Object Model

  • 文书档案对象模型
  • DOW 是照准HTML 和XML 文书档案的叁个api ,
  • DOM 中叙述了叁个层级化的节点树,
  • 同意开荒职员实行增添,移除和修正页面中的某生机勃勃有些
  • W3C 中的DOM 规范化分为三有的
  1. 中央DOM – 针对任何结构化文书档案的正规模型
  2. XML DOM – 针对XML结构化文书档案的标准模型
  3. HTML DOM – 针对HTML 文书档案的行业内部模型
  • HTML DOM 是关于怎么着收获,修正,增添 也许去除
  • HTML 元素的正规化,即操作HTML 成分
    • api: 应用程序编制程序接口

<html>
<head>
<title>DOM</title>
</head>
<body>

</body>
</html>

得到的消息:

  1. Document 节点是每三个文书档案的根节点
  2. Document 节点下 有一个HTML 节点
  • 咱俩将以此节点称为文书档案成分
  • 文书档案元素是文档最外层的因素,其他的
  • 要素都满含在文书档案成分之中
  • 四个文书档案只可以有一个文书档案元素,在HTML
  • 中,文书档案成分永恒是<html>成分
  1. 在DOW 数中,html文书档案的每生龙活虎处标识
  • 都能够用树中的贰个节点来代表
  • html成分标签-元秋天点来代表
  • 质量-> 属性节点 来代表
  • 文书档案类型-> 文书档案类型节点 来表示
  • 申明-> 注释节点 来代表
    • 那有的是用作中期必要做好的陪衬内容
    • 通用的 Document 和 Element 类型 与
    • HTMLDocument 和 HTMLElement 是有分别的
    • Document 只表示一个 HTML 大概 XML 文书档案

    • Element 类型代表的是该文书档案的二个因素

    • HTMLDocument 和 HTMLElement 子类

    • 只针对 HTML 文档 和 元素

DOM 中 节点分类(12种等级次序卡塔尔必要记的(要求深深记住卡塔尔
能够在英特网查到

    /*
     需要记住的文档类型节点
     * 
     * 1.元素     Node.ELEMENT_NODE
     * 2.属性     Node.ATTRIBUTE_NODE
     * 3.文本     Node.TEXT_NODE
     * 4.注释     Node.COMMENT_NODE
     * 5.文档     Node.DOCUMENT_NODE
     * */

Node.ELEMENT_NODE //元素
Node.ATTRIBUTE_NODE //成分中的属性
Node.TEXT_NODE //纯文本(未有子节点卡塔 尔(英语:State of Qatar)
Node.CDATA_SECTION_NODE //子节点是TextNode
Node.ENTITY_REFERENCE_NODE
//文书档案中的实体援引
Node.ENTITY_NODE
//DTD 中实体定义
Node.PROCESSING_INSTRUCTION_NODE
//多个文书档案管理程序中
//使用的特有指令
Node.COMMENT_NODE
//注释
Node.DOCUMENT_NODE
//最外层的 根节点
Node.DOCUMENT_TYPE_NODE
//文书档案类型定义
Node.DOCUMENT_FRAGMENT_NODE
//更迷你的 Document 节点
//定义这一个数据类型首倘使为
//了造福只希望领到文档的
//某风姿洒脱有的时接受
Node.NOTATION_NODE
//DTD 的 Nation 定义
//在 XML 文书档案中象征三个标记

节点属性
1. nodeName
 节点名称
* nodeName 是只读的
* nodeName 始终包含HTML 元素的大小写字母 标签名

2. nodeValue
    节点
    或者进行设置或返回节点的值

3. nodeType
节点的类型

## DOM核心对象-document 对象
 JS 中是通过Document 类型来表示文档
 在浏览器中,document 的对象是HTMLDocument
 表示整个HTML界面
 而且document 对象是 window对象各个属性
 我们可以将其当做全局对象来访问

 nodeType: 9(上面的内容第九个)
 nodeName: #document
 nodeValue: null
 parentNode:null(父节点)
 ownerDocument:null (根元素节点)
## 获取节点
document对象来获取页面有关的信息

<body>
<h1>笔者是标题</h1>

<script>
document.getElementById(“myH1”);//获取节点
console.log(h1.id); // 元素的id
console.log(h1.className);// 元素的class
console.log(h1.innerHTML);// 元素的HTML文本

</script>

1. 使用该方法一定不要查找多个id
2. 如果有多个相同的id,则只会返回一个元素
3. 在低于IE 8 的版本,对匹配元素的ID不区分大小写

var h1s =
document.getElementById(“h1”);
console.log(h1s);
for(var i = 0;i < h1s.length;i++){
console.log(h1s[i].id);//获取id
console.log(h1s.item(i).id);//获取id
console.log(h1s[i].id);//获取id
}

该方法是根据标签名称来获取元素节点
* 因为一个文档中可能出现多个标签
* 所以该方法返回的是多个Element组成的集合
* 尽量使用getElementById()
* 
### NodeList 对象(NodeList: 节点列表)
类数组集合
* 返回的是一个只读 类数组对象
* 他们拥有length属性
* 也可以像数组一样索引


## 获取元素
写from 标签的时候
一个内容,如果多个用input表单

<body>
<from ..>
<input type=””name=””id=””value=””/>洗澡
<input type=””name=””id=””value=””/>喝水
<script ..>
var name =
document.getElementsByName(“input_name”);
for(var i = 0;i<name.length;i++){
console.log(names[i].value)
}
</script>

 是通过标签的name 属性的值来获取元素
 可能出现多个相同的name值,
 所以返回是一个Element 组成的集合 
 有严重的兼容性问题, 
在IE中

## 获取元素querySelector(CSS 的选择器)

<title>Document</title>
</head>
<body>
<p id=”demo”></p>
</body>
<script ..>
var p_1 = document。querySelector(“#demo”);
console.log(p_1);

对应一个选择器,特别好用

### querySelector(CSS 的选择器)
参数;
* CSS 选择器
  * 指定一个或者多个匹配的CSS 选择器
    *  id,class,类型 属性

* 返回值

<body>
</body>
<script>
var p_1 =
document.querySelector(“.id”)

### querySelectorAll()
返回所有匹配的元素

HTML5 中引入的

返回不是实时,返回的是调用时刻所匹配的内容

* :hover、:visitited 去访问到用户的浏览器习惯等
* 很多浏览器会直接拒绝使用这个内容

<body>
火速格局
</body>
<script..>
var all = document.querySelectorALL(“.p_1”);
console.log(all);
console.log(all.length);
console.log(all[1]);

![元素关系图](http://upload-images.jianshu.io/upload_images/4166371-f294ca46dda64bef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 6_Note 获取操作

元素关系
1. 父元素
2. 子
3. 兄弟关系
4. 父子关系

1. 父节点 (parent)
* 父节点拥有任意数量的子节点
2. 子节点 (child)
3. 兄弟节点(sibling)
*  自己百度吧 有图 节点操作
4. 根节点 (root)
* 根节点不可能有父节点
* 只能存在一个
* 一个文档中的“源头”

### 7_childNodes.html
childNodes
* 获取一个元素的所有的子节点
* 返回值是一个数组
* 只获取子节点,不能获取到子节点的子节点

<body>
<div id=”div”>//获取扩充时会再说,有题目,但足以阅览
<a href=”###”>简书</a>
</div>
div>
<a href=”###”>有道云</a>
</div>
div>
<a href=”###”>微博</a>
</div>
<script ..>
var nodes =
document.getElementById(“div”).childNodes;
console.log(nodes);
for(var i=0;i<nodes.length;i++){
console.log(nodes[i].n…
}

firstChild 属性
* 获取元素的第一个子节点
 如果选定的节点没有子节点,
 则直接返回null

var div = document.getElementById(“div”);
//获取第三个头节点
var firstChild = div.firstChild;

console.log(firstChild);
console.log(firstChilld.nodeName);

var lastChild=

可以写函数判断,也可以通过挪动下位置


## 8_parentNode 属性
获取一个元素的父节点

<body>
<div id=”div”>
<a href=”###”>搜狐</a>

<sc..>
var div = document.getElementById(“div”);
var node_1 = div.parentNode;
console.log(node_1)
….

图面展示...


## previousSibling 
获取一个元素的上一个兄弟节点

var div1 =document.getElementById(“div1”);
var previousSibling = div1…

跟上一部分是相关的。
找到它的上一个兄弟。

## nextSibling
获取一个元素的下一个兄弟节点

var nextSling = div1.nextSibling;
console.log(nextSibling)

拓展:
1. 获取一个节点所在的文档的根节点

元素节点名称.ownerDocument

实际上相当于当前整个文档节点



2. 获取当前节点所有的属性节点

元素节点名称。attributes;

console.log(div1.attributes)

# 9_关于获取元素的拓展(比较重要)
在IE 9 以下,当前内容通过alert()弹出当前
节点的 firstChild 实际上应该为 p 

但是在现代浏览器中,比如 Chrome , FF iell 等等
将会<div> </div>之间的空白节点也解析出来
所以通过alert 弹出的 #text

因为空白节点也是属于text 文本节点

但是如果将多个标签中的空白内容删除
在不同浏览器,来去解决这个问题

function getFirst(elem){
for(var i = 0,e; e = elem.chilNodes[i++];){
if(e.nodeType ==1){
return e;
}//做判断
}
}
var first =
document.getElementsByTagName(“div”)[0];
console.log(first);

我们经常会选择区用一个方法直接获取父元素的
第一个节点,
DOM中直接拓展了一个新的方法
farstElementChild

console.log(farstElementChild);

但是,拓展的方法 farstElementChild
在现代浏览器中兼容,但是在IE6/7/8中
没有该方法
一旦使用会报错

children

 不是标准属性,返回指定元素的子元素集合
 但是它只返回HTML节点,甚至不会返回文本节点

 虽然不是标准DOM,但是和innerHTML,一样,等到了几乎所有浏览器支持

和childNodes 一样,在Firefox 中不支持
直接

console.log(farst children[0]);

nextSibling --> farstElementChild
lastChild --> lastElementChild
nextSibling --> farstElementChild
previousSibling --> previousElementChild

## 修改:
1. 创建文本节点
createTextNode()
    1. createTextNode(text)
创建文本节点
2. 添加一个child 元素 appendChild()
3. 创建一个新的元素节点createElement()
4. 在一个节点之前插入新的节点insertB..
5. 移除子节点
6. 替换子节点
7. 克隆节点

var textNode = document.createTextNode(“谢聃”);
console.log(textNode.nodeName);
console.log(textNode.nodeV..e);

appendChild(node)
参数:
* node 
    * 需要添加的节点
    * 必选参数
* 返回值:
    * 参数对象本身
* append翻译过来是 追加
* 。。

var div = document.getElementById(“div”);
div.app..(textNode);

createElement(nodeName)
创建一个元素节点
* 参数:
    * nodeName
    * 需要创建元素的名称
* 返回值:
    * 创建的元素节点

var newElement = document.createElement(“a”);

insertBefore(newNode,existingNode)

在一个节点前面插入一个新的节点

参数:
* newNode
    * 需要插入的新的节点
* 。。。。
* 目标节点

<div id= “div”></div>
<ul id=”language”>
<li>java</li>
<li>c#</li>
</ul>
<buttom onclick=”此处填写相应的保加利亚共和国(Народна република България卡塔尔国语(卡塔 尔(阿拉伯语:قطر‎”
<buttom onclick=”cloneNode(deep)”>克隆</buttom>

<sc..>
function addNode(){
var newItem=
document.createElement(“li”);
}

removeChild(node)
移除子节点

参数:
* node 
    * 必选参数
    * 需要移除的子节点

function removeNode(){
var languageList = document.getElementById(“language”);
var li_List = languageList.getElementsByTagName(“li”);

console.log(li_List);
languageList.removeChild(li_List[0]);
console.log(li_List.length);
}

获取相应的节点,然后在移除
调用,button 小按钮 在上面的 <body>

function addNode(){
var newItem = document.createElement(“li”);
var textNode_2 = document.createTextNode(“JavaScript”);
newItem.appendChild(textNode_2);
var languageList = document.getElementById(“language”);
//将 newItem 添加到 language 列表中
languageList.insertBefore(newItem,languageList.firstChild);
}

替换子节点
replaceChild(newNode,oldNode)

参数
* newNode
    * 新节点 
* oldNode
    * 旧节点 

    function replaceNode(){
        var languageList = document.getElementById("language");
        var newLi = document.createElement("li");
        newLi.innerHTML = "NodeJS";
        //使用新的节点替换旧的节点
        languageList.replaceChild(newLi,languageList.childNodes[0]);
    }

克隆节点
cloneNode(deep)
*  该方法可以用于创建指定的节点的精确拷贝
*  拷贝所有的属性和属性值

该方法将赋值并返回它的节点的副本

function cloneNode(){
var languageList =
documment.getElementById(“language”);

var newList.cloneNode(ture)

}

完整代码

    function cloneNode(){
        var languageList = document.getElementById("language");
        //克隆整个 languageList 节点
        //传入的参数如果为 true
        //则代表深拷贝
        //所有的子节点都 copy 下来
        var newList = languageList.cloneNode(true);
        document.getElementsByTagName("body")[0].appendChild(newList);
    }

##  元素属性操作
### 1. 获取属性值 getAttibute()
attributName
* 获取元素的某个属性名称
* id、classname
* 返回值:
    * 获取指定属性的属性值 

<body>
<a
href=”http://www.baidu.com”
id = “a_id”
target=””

<sc..>
function getShuXing(){
var a = document.getElementById(“a_id”);
console.log(“id = ” + a.getAttribute(“id”) + “\ntarget = ” +
a.getAttribute(“target”));
}

### 2. 设置属性值  setAttibute()
作用:
* 创建或者更改某个值
* 如果存在,则设置该值就可
* 不存在,则创建该属性并设置该属性值

function setShuXin(){
var a = document.getElementById(“a_id”);
a.setAttribute(“href”,”http://www.yztcedu.com”);
}

将百度已换成育知同创


### 3. 移除属性值.. retAttibute()
AttributName
* 必选参数
* 需要移除的属性名称

function removeShuXin(){
        var a = document.getElementById("a_id");
        a.removeAttribute("target");
}

### 4. 检查是否包含某个属性 hasAttribute()
hasAttribute() 
* 检查是否包含某个属性
去前面方法的需要检查的名称
返回值为ture/false
判断

console.log(document.getElementById(“a_id”).hasAttribute(“target”));

如果操作中包含来自其他空间属性的XML文档的时候,在当前四个方法后面+NS(命名空间)
四个方法的空间版

2、HTML 元素


怀有 HTML 成分都由 HTMLElement
类型表示,不是一贯通过那一个体系,也是透过它的子类型来代表。 HTMLElement
类型直接接轨自 Element 并增多了部分个性。种种 HTML
成分中都存在下列标准属性:

  1. id 成分在文档中的唯风流倜傥标记符
  2. title 有关因素的叠合表达新闻,日常通过工具提示条彰显出来
  3. lang 成分内容的言语代码,超少使用
  4. dir 语言的可行性,值为 ltr 或者 rtl,也少之甚少使用
  5. className 与成分的 class 个性对应

3.询问成分有两种广泛的办法?ES5的成分选拔方式是何等?

attribute是一个特色节点,种种DOM成分都有三个应和的attributes属性来存放在全数的attribute节点,attributes是一个类数组的容器,说得精确点便是NameNodeMap,简单来说正是叁个看似数组但又和数组不太同样的容器。attributes的每一个数字索引以名值对(name=”value”)的样式寄放了三个attribute节点。

3、天性的收获和装置


每一个成分都有一个或多少个特征,那些特色的用途是交给相应成分或其剧情的叠合音讯。操作性情的
DOM
方法首要有多个,分别是getAttribute() setAttribute() removeAttribute()

注意,传递给 getAttribute() 的特点名与实际的性子名相似,因而要想赢得 class 个性值,应该传入 class 而不是 className,前者独有在通过对象属性(property卡塔 尔(英语:State of Qatar)访问特性时才用。若是给定称号的特性不设有,getAttribute() 返回
null。

<div id=’myDiv’ title=’hanzichi’> </div> <script> var
myDiv = document.querySelector(‘div’); // attribute
console.log(myDiv.getAttribute(‘id’)); // myDiv
console.log(myDiv.getAttribute(‘class’)); // null
console.log(myDiv.getAttribute(‘title’)); // hanzichi
console.log(myDiv.getAttribute(‘lang’)); // null
console.log(myDiv.getAttribute(‘dir’)); // null // property
console.log(myDiv.id); // myDiv console.log(myDiv.className); // ”
console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // ”
console.log(myDiv.dir); // ” </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id=’myDiv’ title=’hanzichi’> </div>
<script>
  var myDiv = document.querySelector(‘div’);
 
  // attribute
  console.log(myDiv.getAttribute(‘id’)); // myDiv
  console.log(myDiv.getAttribute(‘class’)); // null
  console.log(myDiv.getAttribute(‘title’)); // hanzichi
  console.log(myDiv.getAttribute(‘lang’)); // null
  console.log(myDiv.getAttribute(‘dir’)); // null
 
  // property
  console.log(myDiv.id); // myDiv
  console.log(myDiv.className); // ”
  console.log(myDiv.title); // hanzichi
  console.log(myDiv.lang); // ”
  console.log(myDiv.dir); // ”
</script>

通过 getAttribute() 方法也得以获得自定义天性。

在其实付出中,开荒人士有的时候用 getAttribute(),而是只使用对象的质量(property卡塔尔。唯有在获得自定义天性值的情状下,才使用getAttribute() 方法。为啥吧?比方说 style,在通过 getAttribute() 访问时,返回的 style 性子值包涵的是
css
文本,而透过属性来访谈会回到多少个对象。再比方 onclick 那样的事件管理程序,当在要素上采纳时,onclick 本性富含的是
Javascript
代码,如若经过 getAttribute() 访谈,将会回来相应代码的字符串,而在探访 onclick 属性时,则会回去
Javascript 函数。

与 getAttribute() 对应的是 setAttribute(),那些点子选择七个参数:要安装的风味名和值。纵然特性已经存在,setAttribute()会以钦定的值替换现成的值;借使性子不真实,setAttribute() 则成立该属性并设置相应的值。

而 removeAttitude() 方法用于深透剔除成分的表征。调用这些点子不但会消弭性情的值,何况也会从要素中完全除去个性。

JavaScript

div.setAttribute(‘id’, ‘someOtherId’); div.setAttribute(‘title’, ‘some
other text’); div.removeAttribute(‘class’)

1
2
3
4
div.setAttribute(‘id’, ‘someOtherId’);
div.setAttribute(‘title’, ‘some other text’);
 
div.removeAttribute(‘class’)

document方法:

  • document.getElementById()
    getElementById方法再次回到相称钦点id属性的因白藏点。若无开采相配的节点,则赶回null。
    其大器晚成措施只好在document对象上运用,不可能在任何因初秋点上接收。
  • document.getElementsByTagName()
    document.getElementsByTagName方法重回全部钦赐HTML标签的成分,重返值是几个接近数组的HTMLCollection对象,能够实时反映HTML文书档案的变迁。若无其它相称的要素,就回到三个空集。不仅能在document对象上调用,也得以在别的因秋日点上调用。
  • docuemnt.getElementsByClassName()
    document.getElementsByClassName方法再次来到三个像样数组的目的(HTMLCollection实例对象卡塔 尔(阿拉伯语:قطر‎,蕴含了独具class名字相符钦命条件的要素,成分的调换实时反映在回来结果中。不仅可以够在document对象上调用,也足以在其它因秋季点上调用。
  • document.getElementsByName()
    document.getElementsByName方法用于选取具备name属性的HTML成分(例如<form>、<radio>、<img>、<frame>、<embed>和<object>等卡塔尔国,重临二个相通数组的的靶子(NodeList对象的实例卡塔尔,因为name属性雷同的要素只怕无休止叁个。
  • document.elementFromPoint
    document.elementFromPoint方法重临位于页面内定地点最上层的Element子节点。

复制代码 代码如下:

4、attributes 属性


Element 类型是运用 attributes 属性的唯生机勃勃三个 DOM
节点类型。 attributes 属性中隐含三个 NamedNodeMap,与 NodeList
相近,也是五个“动态”的聚焦。成分的每叁个特色都由一个 Attr
节点表示,每种节点都封存在 NamedNodeMap 对象中。NamedNodeMap 对象具有下列格局:

  1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
  2. removeNamedItem(name):
    从列表移除 nodeName 属性等于 name 的节点
  3. setNamedItem(node):
    向列表中增加节点,以节点的 nodeName 属性为索引
  4. item(pos): 再次来到位于数字 pos 地点处的节点

attributes 属性中带有生龙活虎雨后玉兰片的节点,种种节点的 nodeName 正是特色的称号,而节点的 nodeValue 就是特色的值。

JavaScript

// 获得成分的个性值 var id =
element.attributes.getNamedItem(‘id’).nodeValue; var id =
element.attributes[‘id’].nodeValue; // getAttribute() 也能贯彻平等功能var id = element.getAttribute(‘id’); // 与removeAttribute()
方法相比较,唯生机勃勃的差别是能回来表示被去除特性的节点 var oldAttr =
element.attributes.removeNamedItem(‘id’); // 增加新特征 //
须求传入一个表征节点 element.attributes.setNamedItem(newAttr);

1
2
3
4
5
6
7
8
9
10
11
12
13
// 取得元素的特性值
var id = element.attributes.getNamedItem(‘id’).nodeValue;
var id = element.attributes[‘id’].nodeValue;
 
// getAttribute() 也能实现一样功能
var id = element.getAttribute(‘id’);
 
// 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
var oldAttr = element.attributes.removeNamedItem(‘id’);
 
// 添加新特性
// 需要传入一个特性节点
element.attributes.setNamedItem(newAttr);

相符的话,由于前边介绍的 attributes
方法相当不足便利,因而开荒人士越来越多的会选拔 getAttribute() removeAttribute() 以及setAttribute() 方法。

而是假使想要遍历成分的特征,attributes 属性倒是能够派上用处:

<div id=’myDiv’ title=’hanzichi’ class=’fish’> </div>
<script> var myDiv = document.querySelector(‘div’); for (var i =
0, len = myDiv.attributes.length; i < len; i++) { var attrName =
myDiv.attributes[i].nodeName , attrValue =
myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } //
id myDiv // title hanzichi // class fish </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id=’myDiv’ title=’hanzichi’ class=’fish’> </div>
<script>
  var myDiv = document.querySelector(‘div’);
  for (var i = 0, len = myDiv.attributes.length; i < len; i++) {
    var attrName = myDiv.attributes[i].nodeName
      , attrValue = myDiv.attributes[i].nodeValue;
 
    console.log(attrName, attrValue);
  }
 
  // id myDiv
  // title hanzichi
  // class fish
</script>

ES5的方法:

  • document.querySelector()
    document.querySelector方法选取一个CSS选择器作为参数,重临相称该接收器的要首秋点。假设有七个节点满意相称原则,则赶回第多少个卓越的节点。若无意识相称的节点,则赶回null
  • document.querySelectorAll()
    document.querySelectorAll方法与querySelector用法相符,分歧是再次来到一个NodeList对象,满含全体相配给定选拔器的节点。

<div class=”box” id=”box” gameid=”880″>hello</div>

5、元素的子节点


<ul id=’myUl’> <li> Item 1 </li> <li> Item 2
</li> <li> Item 3 </li> </ul> <script> var
myUl = document.getElementById(‘myUl’);
console.log(myUl.childNodes.length); // IE: 3 其余浏览器: 7
</script>

1
2
3
4
5
6
7
8
9
10
<ul id=’myUl’>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
</ul>
 
<script>
  var myUl = document.getElementById(‘myUl’);
  console.log(myUl.childNodes.length); // IE: 3   其他浏览器: 7
</script>

以上代码,假若是 IE 来分析,那么 <ul> 成分会有 3 个子节点,分别是 3
个 <li> 成分;而假设是其他浏览器深入解析,则会有 7 个子节点,包含 3
个 <li> 元素 和 4 个文本节点。

少年老成旦像下边那样将成分之间的空白符删除,那么富有浏览器都会回到相符数量的子节点:

<ul id=’myUl’><li> Item 1 </li><li> Item 2
</li><li> Item 3 </li></ul> <script> var
myUl = document.getElementById(‘myUl’);
console.log(myUl.childNodes.length); // 全部浏览器: 3 </script>

1
2
3
4
5
6
<ul id=’myUl’><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
 
<script>
  var myUl = document.getElementById(‘myUl’);
  console.log(myUl.childNodes.length); // 所有浏览器: 3
</script>

 

打赏协理自个儿写出更加多好小说,谢谢!

打赏小编

4.哪些创立一个因素?怎么样给成分设置属性?怎么着删除属性

  • document.createElement()
    document.createElement方法用来生成网页成分节点。

var newDiv = document.createElement('div');```
createElement方法的参数为元素的标签名,即元素节点的tagName属性,对于 HTML 网页大小写不敏感,即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号(即<和>)会报错。

<body>
<div id=”div1″ class=’test’>ss</div>
<script charset=”utf-8″>
var body = document.getElementsByTagName(‘body’)//获取节点
var newDiv = document.createElement(‘div’)//创设元素
newDiv.setAttribute(‘id’,’xxx’)//设置属性
var newContent = document.createTextNode(‘hello world’) //成立文本节点
body[0].appendChild(newDiv)//插入节点
newDiv.appendChild(newContent) //插入文本节点
document.getElementById(‘div1’).removeAttribute(‘class’)//删除属性
</script>
</body>“`

上面的div成分的HTML代码中有class、id还可能有自定义的gameid,这么些特色都存放在attributes中,相通上边包车型大巴款式:

打赏扶植本身写出越多好小说,感谢!

图片 2

1 赞 1 收藏
评论

5.什么给页面成分增添子成分?如何删除页面成分下的子成分?

<body>
      <div id="div1" class='test'>div1</div>
      <div id="div2">div2</div>
      <div id="div3">div3</div>
      <div id="div4">div4</div>
      <div id="div5">div5</div>
      <script charset="utf-8">
        var body = document.getElementsByTagName('body')
        var newDiv = document.createElement('div')
        newDiv.setAttribute('id','xxx')
        var newContent = document.createTextNode('hello world') 
        body[0].appendChild(newDiv)//页面元素添加子元素
        newDiv.appendChild(newContent)     
        document.getElementById('div1').removeAttribute('id')
        body[0].removeChild(document.getElementById('div4'))//删除页面元素下的子元素
        document.getElementById('div2').remove()//删除元素本身
      </script>
    </body>```
# 6.element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
- className属性用来读写当前元素节点的class属性。它的值是一个字符串,每个class之间用空格分割。
- classList属性则返回一个类似数组的对象,当前元素节点的每个class就是这个对象的一个成员。
#### classList对象有下列方法。

>add():增加一个class。
remove():移除一个class。
contains():检查当前元素是否包含某个class。
toggle():将某个class移入或移出当前元素。
item():返回指定索引位置的class。
toString():将class的列表转为字符串。

myDiv.classList.add(‘myCssClass’);//加多三个class
myDiv.classList.add(‘foo’, ‘bar’);//增加多个class
myDiv.classList.remove(‘myCssClass’);//删除二个class
myDiv.classList.toggle(‘myCssClass’); //
假若myCssClass空中楼阁就步入,存在就移除
myDiv.classList.contains(‘myCssClass’); // 返回 true 或者 false
myDiv.classList.item(0); // 重返第一个Class
myDiv.classList.toString();//将classList对象转变为字符串与.className效果等同

# 7.如何选中如下代码所有的li元素? 如何选中btn元素?

<div class=”mod-tabs”>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class=”btn”>点我</button>
</div>
<script>
var liAll =
document.getElementsByTagName(‘li’)//选中存有li成分临蓐类数组对象
var btn = document.getElementsByClassName(‘btn’)//选中btn元素
</script>

复制代码 代码如下:

至于作者:韩子迟

图片 3

a JavaScript beginner
个人主页 ·
笔者的稿子 ·
9 ·
   

图片 4

[ class=”box”, id=”box”, gameid=”880″ ]

可以如此来拜见attribute节点:

复制代码 代码如下:

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注