澳门新莆京手机网站-新蒲京娱乐场 > 联系我们 > DOM Element节点类型详整

DOM Element节点类型详整

至于笔者:韩子迟

图片 1

a JavaScript beginner 个人主页 · 笔者的小说 · 9 ·    

图片 2

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

  • element.children 获取的是当下成分的具备子节点成分(不富含文件成分),children重返的是HTMLCollection类型
  • element.childNodes 获取的是现阶段因素的有所子成分(节点成分和文件成分),childNodes重临的是NodeList类型

DOM

图片 3

一张图告诉您怎么着是DOC

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // undefined
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // null

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.tagNameState of Qatar; // DIV console.log(myDiv.nodeName卡塔尔国; // DIV if (myDiv.tagName.toLowerCase(State of Qatar === 'div'State of Qatar { // 那样最佳,适用于别的文书档案 // ... }

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') { // 这样最好,适用于任何文档
  // ...
}

1.dom对象的innerText和innerHTML有如何分别?

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

概念

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 //纯文本(未有子节点)
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(命名空间)
四个方法的空间版

<input type="radio" checked="anything" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // anything
console.log( radio.checked ); // true

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'State of Qatar; // 增多新特征 // 必要传入贰个特色节点 element.attributes.setNamedItem(newAttrState of Qatar;

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>

3.询问元素有三种普及的主意?ES5的成分选择格局是怎么着?

复制代码 代码如下:

3、性格的得到和设置


各种成分都有三个或两个特征,这一个特点的用项是付诸相应成分或其剧情的附加音讯。操作天性的 DOM 方法首要有几个,分别是getAttribute() setAttribute() removeAttribute()

注意,传递给 getAttribute() 的表征名与事实上的性状名相符,由此要想获取 class 特性值,应该传入 class 而不是 className,后面一个唯有在通过对象属性(property)访问天性时才用。借使给定称号的性状不设有,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(State of Qatar 方法也可以赢得自定义个性。

在事实上开采中,开辟人士有时用 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')

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>

DOM成分的attribute和property非常轻便混倄在同步,分不清楚,两个是例外的东西,不过互相又联系紧凑。超级多新手朋友,也满含从前的自己,常常会搞不清楚。

2、HTML 元素


具有 HTML 成分都由 HTMLElement 类型表示,不是直接通过那么些项目,也是通过它的子类型来代表。 HTMLElement 类型直接接轨自 Element 并增添了有些质量。各类 HTML 成分中都设有下列标准属性:

  1. id 成分在文书档案中的唯意气风发标记符
  2. title 有关因素的叠加表明音讯,日常通过工具提醒条呈现出来
  3. lang 元素内容的言语代码,非常少使用
  4. dir 语言的大方向,值为 ltr 或者 rtl,也相当少使用
  5. className 与成分的 class 天性对应

ES5的方法:

  • document.querySelector()
    document.querySelector方法选取一个CSS选用器作为参数,重回相称该接收器的要早秋点。假使有几个节点知足相称原则,则赶回第二个卓绝的节点。若无发觉相称的节点,则赶回null
  • document.querySelectorAll()
    document.querySelectorAll方法与querySelector用法相通,分歧是重临三个NodeList对象,包蕴全体相称给定选用器的节点。

console.log( elem.getAttribute('id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ); // hello

打赏支持笔者写出越多好文章,多谢!

图片 4

1 赞 1 收藏 评论

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'State of Qatar//获取节点
var newDiv = document.createElement('div'State of Qatar//创设成分
newDiv.setAttribute('id','xxx'卡塔尔//设置属性
var newContent = document.createTextNode('hello world'卡塔尔 //成立文本节点
body[0].appendChild(newDiv卡塔尔(قطر‎//插入节点
newDiv.appendChild(newContent卡塔尔(قطر‎ //插入文本节点
document.getElementById('div1'卡塔尔(قطر‎.removeAttribute('class'卡塔尔//删除属性
</script>
</body>```

elem.gameid = 880; // 添加
console.log( elem.gameid ) // 获取
delete elem.gameid // 删除

DOM Element节点类型精解

2015/09/21 · HTML5 · DOM

本文小编: 伯乐在线 - 韩子迟 。未经小编许可,禁绝转发!
款待加入伯乐在线 专栏审核人。

上文中大家解说了 DOM 中最注重的节点类型之黄金时代的 Document 节点类型,本文大家世袭深刻,谈谈另二个首要的节点类型 Element 。

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子节点。

上边的div成分的HTML代码中有class、id还大概有自定义的gameid,这么些特点都贮存在attributes中,近似上面包车型大巴情势:

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.lengthState of Qatar; // 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>

 

打赏援助笔者写出越多好小说,多谢!

打赏小编

而是对于自定义的attribute节点,也许自定义property,两个就从未关系了。

复制代码 代码如下:

elem.setAttribute('testAttr', 'testVal');
console.log( elem.removeAttribute('gameid') ); // undefined

Copyright © 2015-2019 http://www.carrefourstation.com. 澳门新莆京手机网站-新蒲京娱乐场有限公司 版权所有