夜光序言:
自己可以处理的事情,不管再小请不要打扰别人。
每个人都有自己的生活,不要随便和别人的生活产生交集
正文:
JavaScript HTML DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
以下代码选取了文档中所有的 <p> 节点:
夜光:解析
获取 <p> 元素的集合:
var myNodelist = document.querySelectorAll("p");
显示节点列表的元素个数:
document.getElementById("demo").innerHTML = myNodelist.length;
length 属性常用于遍历节点列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Genius Team</p>
<p>Hello 001~~</p>
<p>点击按钮修改所有 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
}
</script>
</body>
</html>
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name,id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript 允许自定义对象。
所有事物都是对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
- 布尔型可以是一个对象。
- 数字型可以是一个对象。
- 字符串也可以是一个对象
- 日期是一个对象
- 数学和正则表达式也是对象
- 数组是一个对象
- 甚至函数也可以是对象
JavaScript 对象
对象只是一种特殊的数据。
对象拥有属性和方法。
访问对象的属性
属性是与对象相关的值。
访问对象属性的语法是:
objectName.propertyName
这个例子使用了 String 对象的 length 属性来获得字符串的长度:
var message="Genius Team";
var x=message.length;
在以上代码执行后,x 的值将是:
长度
访问对象的方法
方法是能够在对象上执行的动作。
您可以通过以下语法来调用方法:
objectName.methodName()
这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:
var message="Genius Team";
var x=message.toUpperCase();
在以上代码执行后,x 的值将是:
大写字母
创建 JavaScript 对象
通过 JavaScript
我们能够定义并创建自己的对象。
创建新对象有两种不同的方法:
- 定义并创建对象的实例
- 使用函数来定义对象,然后创建新的对象实例
创建直接的实例
小试牛刀~~
创建了对象的一个新实例,并向其添加了四个属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<script>
var person=new Object();
person.firstname="001";
person.lastname="000";
person.age=1111;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<script>
person={firstname:"001",lastname:"000",age:1111,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>