学习笔记（9）JavaScript元素、节点

1，元素属性

HTML标签属性可以分为2种，

1. html标准属性：在html语法中能够直接被浏览器识别，有专门用途。
2. 自定义属性：标准属性之外的都叫做自定义属性，满足个性化。
   基本所有的html属性都可以使用对象.属性的形式访问，属性也支持读和写。

var h1 =document.getElementById("name");
//属性读
console.log(h1.title);
//属性写
h1.title ="不忘初心!";
1
2
3
4
5

1.1，标准属性

1，每一个元素对象都有一个完整的style层叠样式表。
元素的style属性代表该元素的样式表。当为元素的标签设置style属性之后，实际上是把字符串(red)解析成了一个对象，然后再赋值。

h1.style.color ="red";
//上下2行代码相同
h1.style="color:red"
1
2
3

2，标准的class属性可以设置多个值，因为class本身就是一个列表。

//className：添加样式名称
p1.className ="green bold";
1
2

class样式增删改查

add：添加。

p1.classList.add("bold");
1

remove：有则删除。

p1.classList.remove("bold");
1

toggle：有则删，无则添。

p1.classList.toggle("bold");
1

contains：判断某些样式是否存在。

console.log(p1.classList.contains("bold"));
1

1.2，自定义属性

1. getAttribute：获取自定义属性和标准属性。

var v1 =p1.getAttribute("dalong");  
1

2. setAttribute：添加自定义属性和标准属性。

/*
  setAttribute，两个参数：
  1参是属性名，
  2参属性值
*/
p1.setAttribute("state","ready");
1
2
3
4
5
6

3. hasAttribute：判断是否有自定义属性。

console.log(p1.hasAttribute("state"));
1

4. removeAttribute：删除自定义属性。

 p1.removeAttribute("state");
1

对于标签对象，访问对象属性时，标准属性和对象属性的访问方式一样的(people.name与p1.title)；如果是非标准属性，访问的就是对象的属性而不是标签的属性了。

2，节点

2.1，属性类型节点

1，attributes：查找某个元素节点上所有的属性，返回一个属性列表。

//(每一个属性都可以理解为是一个小的数据)
var attList =a.attributes;
1
2

2，修改或者添加属性节点

//属性有就代表修改
a.setAttribute("target","_self");

//属性无则代表添加
a.setAttribute("title","百度一下，你就知道");
1
2
3
4
5

3，删除属性节点

a.removeAttribute("href");
1

4，对于class属性的修改，有专门的样式表，提供了增删改查。

//增
a.classList.add("bgy");
// 删除
a.classList.remove("kaiti");
// 替换
 a.classList.toggle("red");
1
2
3
4
5
6

5，对于style属性的修改，直接修改元素节点就可以

a.style.marginLeft ="100px";
1

2.2，文本类型节点

1，childNodes表示本节点所有的子节点，类型是一个NodeList。

var list =ul.childNodes;
1

2，nod：表示单一的节点

 var nod =list[i];
1

3，元素中的标签和文本(包括空格和换行)都属于元素的子节点。

//nodeType表示节点类型：1.为元素 2.属性 3.文本。
console.log(nod.nodeType);
1
2

4，文本节点属于叶子节点，往下没有子节点了。