JavaScript基础

最新推荐文章于 2024-11-05 22:07:06 发布

hello..world

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量159

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_74730282/article/details/137049776

版权

本文详细介绍了JavaScript中通过ID、名称、标签、类名和CSS选择器获取DOM元素的方法，以及利用字面量、new关键字和构造函数创建对象的不同方式。

摘要由CSDN通过智能技术生成

JS获取DOM元素的方法

什么是DOM(Document Object Model) 文档接口模型, 可以用于对HTML元素的更改操作

通过id获取

// 获取 ID 为 "myElement" 的元素
var element = document.getElementById("id");

// 修改元素的内容
element.textContent = "Hello, world!";

// 修改元素的样式
element.style.backgroundColor = "lightblue";

通过name获取

<html>
<head>
    <title>getElementsByName 示例</title>
    <script src="script.js"></script>
</head>
<body>
    <input type="text" name="username" value="John">
    <input type="text" name="username" value="Jane">
    <input type="text" name="username" value="Doe">
    <button onclick="getElements()">获取元素</button>
</body>
</html>
<script>
    function getElements() {
        var elements = document.getElementsByName("username");
    
        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].value);
        }
    }
</script>

通过标签获取

document.getElementsByTagName('p')

通过类名

<body>
    <p class="highlight">这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p class="highlight">这是第三个段落。</p>
    <button onclick="highlightElements()">突出显示元素</button>
</body>
<script>
    function highlightElements() {
        var elements = document.getElementsByClassName("highlight");
    
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundColor = "yellow";
        }
    }
</script>

通用获取器

// 选择 ID 为 "myElement" 的元素
var element1 = document.querySelector("#myElement");

// 选择类名为 "myClass" 的第一个元素
var element2 = document.querySelector(".myClass");

// 选择具有 "data-type" 属性且值为 "button" 的第一个元素
var element3 = document.querySelector("[data-type='button']");

// 选择 <p> 元素中的第一个 <a> 元素
var element4 = document.querySelector("p a");

获取html方法

var rootElement = document.documentElement;
console.log(rootElement); // 输出 <html> 元素
rootElement.style.backgroundColor = "lightblue";
rootElement.classList.add("custom-class");

获取body的方法

var bodyElement = document.body;
console.log(bodyElement); // 输出 <body> 元素

// 修改 body 元素的背景颜色
bodyElement.style.backgroundColor = "lightblue";

// 添加一个类名到 body 元素
bodyElement.classList.add("custom-class");

总结

通过id和通过类名等达到的效果并不相同, id因为只能在一个标签里面标明, 所以获取到的结果肯定只有一个或者没有, 而不是数组类型.

js创建对象的几种方式

利用字面量创建对象

var obj = {
    uname: '张三疯',
    age: 18,
    sex: '男',
    sayHi: function () {
      console.log('hi~');
   }
}

利用new Object创建对象

<script>
   var obj = new Object();//O要大写
   obj.uname = '张三疯';
   obj.age = 18;
   obj.sex = '男';
   obj.sayHi = function () {
      console.log('hi~');
   }
   console.log(obj.uname);
   console.log(obj.age);
   console.log(obj['sex']);
   obj.sayHi();
</script>

利用构造函数创建对象

与其说这是个函数, 倒不如直接视为一个类,它包括属性值, 以及方法

<script>
        //创建
        function 构造函数名() {
            this.属性 = 值;
            this.方法 = function () {
            }
        }
        //调用
        new 构造函数名();
</script>

<script>
        function Star(uname, age, sex, song) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
             this.sing = function (song) {
                console.log(song);
            }
        }
        var ldh = new Star('刘德华', 18, '男');
        console.log(ldh.uname);
        console.log(ldh.age);
        console.log(ldh.sex);
        ldh.sing('冰雨');
</script>