夜光带你走进JavaScript（四十八）擅长的领域

最新推荐文章于 2019-12-02 18:08:36 发布

GeniusTeam-夜光

最新推荐文章于 2019-12-02 18:08:36 发布

阅读量143

点赞数

分类专栏： Genius-JavaScript

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102622695

版权

Genius-JavaScript 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

夜光序言：

自己可以处理的事情，不管再小请不要打扰别人。

每个人都有自己的生活，不要随便和别人的生活产生交集

正文：

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>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进JavaScript（四十八）擅长的领域

夜光序言：自己可以处理的事情，不管再小请不要打扰别人。每个人都有自己的生活，不要随便和别人的生活产生交集正文：JavaScript HTML DOM 节点列表NodeList 对象是一个从文档中获取的节点列表 (集合) 。所有浏览器的 childNodes 属性返回的是 NodeList 对象。大部分...
复制链接

扫一扫

专栏目录