JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

html代码:

<!--添加/删除/修改 -->
<div id="a1">
    <button id="a2" onclick="add()">add</button>
</div>

<div id="a3">
    <button onclick="del()">del</button>
</div>

<div id="a4" style="margin-top: 20px">
    <span style="width: 20px;height: 20px">hello world !!!</span>
    <button onclick="change()">change</button>
</div>

<!--classname属性操作-->
<div id="cn" class="a11 b11 c11">
</div>

新增标签(document.createElement(标签))

 // 方式一(butter控件中添加事件)
    function add() {
        var a = document.createElement("span");
        a.innerText=‘this span label!‘;
        var father = document.getElementById(‘a1‘)
        father.appendChild(a)
    }

    // 方式二(直接document获取标签)
    // // 通过的标签,定义事件(只执行一次函数)
    // var s1 = document.getElementById(‘a2‘);
    // var father = s1.parentNode;
    //
    // var a = document.createElement("span");
    // a.innerText=‘this span label!‘;
    //
    // s1.onclick = function f() {
    //     father.appendChild(a);
    // };

删除标签

//删除标签
        function del() {
            var father = document.getElementById(‘a1‘);
            var son = father.getElementsByTagName(‘span‘)[0];
            father.removeChild(son)
        }

修改/替换 标签(replaceChild(新标签,旧标签))

//修改/替换 标签
    function change() {
        //找到父标签
        var father = document.getElementById(‘a4‘);
        //找到需要替换的旧标签
        var son = father.getElementsByTagName(‘span‘)[0];

        //创建一个标签
        var ne = document.createElement(‘div‘);

        // 方式一,定义创建标签样式
        // ne.innerHTML = ‘<div style="background-color: blue;width: 200px;height: 200px">!!!!! </div>‘;

        // 方式二,定义创建标签样式
        // ne.style.backgroundColor = ‘red‘;
        // ne.style.width = ‘200px‘;
        // ne.style.height = ‘200px‘;
        // ne.innerText = "this is new div !!!! "

        //方式三,通过setattribute 设置标签样式.
            ne.setAttribute(‘style‘,"background-color:red;width: 200px;height: 200px");

            //这种方式也可以获取到对象的属性值
            var ne2 = ne.getAttribute(‘style‘);
            console.log(ne2)
            //输出为:background-color:red;width: 200px;height: 200px

        //通过父标签 替换新旧标签
        father.replaceChild(ne,son)
    }

classname 属性操作

//classname属性操作
        var classmame = document.getElementById(‘cn‘)

        //返回classname
        console.log(classmame.className);
        //class列表
        console.log(classmame.classList);
        console.log(classmame.classList[0]);
        console.log(classmame.classList[1]);
        console.log(classmame.classList[2]);

        //增加classname
        classmame.classList.add("d11");
        console.log(classmame.className);
        //移除classname
        classmame.classList.remove("d11");
        console.log(classmame.className);

原文地址:https://www.cnblogs.com/Anec/p/9844972.html

时间: 2024-10-28 23:54:41

JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作的相关文章

javascript学习笔记:DOM节点关系和操作

0x01:前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不同的信息及标记.每个节点都拥有各自的特点.数据和方法,也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.本文将详细描述DOM间的节点关系和基础的DOM操作.节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱.接下来,将把DOM节点关系分为属性和方法两部分进行详细说明. 0x02:属性 父级属性par

javascript学习笔记:DOM节点概述

0x01: DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成.本文将主要说明DOM节点类型.HTML DOM 定义了访问和操作 HTML 文档

JavaScript学习 - 基础(六) - DOM操作

DOM:DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节点:整个文档是一个文档节点(document对象)每个html元素是元素节点(element对象)html元素内的文本是文本节点(text对象)每个html属性是属性节点(arrtibute对象)注释是注释节点(comment对象) <div id="XX">XX <div

JavaScript学习 七、DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API.DOM描绘了一个层次化的节点树.允许开发人员添加.移除.修改页面的某一部分. 节点层次 文档节点是每个文档的根节点,文档元素是文档的最外层元素,文档中其他说有的元素都包含在文档元素中,每个文档只能有一个文档元素,在HTML 中,文档元素始终是<html> 元素,在XML 中没有预定义的元素,因此任何元素都可能成为文档元素. 每一段标记都可以通过树中的一个节点来表示:HTML 元素通过元素节点表示,特性(attribute)通过特性节

JTree 添加 , 删除, 修改

package com.swing.demo; import java.awt.BorderLayout; import java.awt.Container; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import javax.swing.CellEdi

对表格单元格的添加删除修改

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

用SQL语句添加删除修改字段

1.增加字段     alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNcolumn_NAME3.修改字段类型     ALTER TABLE table_name     ALTER COLUMNcolumn_name new_data_type4.sp_rename 改名     EXEC sp_rename '[dbo].[Table_1].[filedName1]

用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等

用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200) 2.删除字段 ALTER TABLE table_NAME DROP COLUMN column_NAME 3.修改字段类型 ALTER TABLE table_name ALTER COLUMN column_name new_data_type 4.sp_rename 改名 更改当前数据库中用户创建对象(如表.列或用户定义数据类型)的名称. 语法 sp_rename

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g