Dom:

　　*　概念：Document Object  Model    文档对象模型

　　　　*　将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作

　　　　*    Dom将HTML文档表达成树结构

　　*　W3C   Dom 标准被分为  3 个不同的部分:

　　　　*  核心  Dom - 针对任何结构化文档的标准模型

　　　　　　*  Document：文档对象

　　　　　　*  Element：元素对象

　　　　　　*  Attribute：属性对象

　　　　　　*  Text：文本对象

　　　　　　*  Comment：注释对象

--------------------------------------------------------------------

　　　　　　*  Node：节点对象，其他5个的父对象

　　　　*  XML  Dom - 针对  XML  文档的标准模型

　　　　*  HTML  Dom - 针对  HTML  文档的标准模型

一、核心DOM模型：

　　*  Document：文档对象

　　　　1、创建（获取）：在html dom模型中可以使用window对象获取

　　　　　　1、window.document

　　　　　　2、document

　　　　2、方法：

　　　　　　1、获取Element对象：

　　　　　　　　1、getElementById()：根据id属性值来获取元素对象，id属性值一般唯一

　　　　　　　　2、getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组

　　　　　　　　3、getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组

　　　　　　　　4、getElementsByName()：根据name属性值来获取元素对象们，返回值是一个数组

    <div id="div1">div1</div>

    <div id="div2">div2</div>

    <div id="div3">div3</div>

    <div class="cls4">div4</div>

    <div class="cls5">div5</div>

    <input type="text" name="username">

    <script>

        //1、getElementById()：根据id属性值来获取元素对象，id属性值一般唯一

        var div = document.getElementById("div1")

        //2、getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组

        var divs = document.getElementsByTagName("div")

        // alert(divs.length)

        //3、getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组

        var div_cls =  document.getElementsByClassName("cls5")

        alert(div_cls.length)

        //4、getElementsByName()：根据name属性值来获取元素对象们，返回值是一个数组

        var ele_username = document.getElementsByName("username")

        alert(ele_username.length)

    </script>

　　　　　　2、创建其他DOM对象：

　　　　　　　　*  createAttribute(name)　

　　　　　　　　*  createComment()

　　　　　　　　*  createElement()

　　　　　　　　*  createTextNode()　　　　　　　　　　　　　　　　

　　　　3、属性：

　　*  Element：元素对象

　　　　　1、 获取/创建：通过document来获取和创建

　　　　　2、 方法：

　　　　　　　　1、removeAttribute()：删除属性

　　　　　　　　2、setAttribute()：设置属性

    <a>点我点我</a>

    <input type="button" value="设置属性" id="btn_set">

    <input type="button" value="删除属性" id="btn_remove">

    <script>

        //获取btn

        var btn_set = document.getElementById("btn_set");

        btn_set.onclick = function () {

            //1.获取a标签

            var element_a = document.getElementsByTagName("a")[];

            element_a.setAttribute("href", "https://www.baidu.com")

        }

         //获取btn

        var btn_remove = document.getElementById("btn_remove");

        btn_remove.onclick = function () {

            //1.获取a标签

            var element_a = document.getElementsByTagName("a")[];

            element_a.removeAttribute("href", "https://www.baidu.com")

        }

    　　</script>

　　*  Node：节点对象，其他5个的父对象（节点对象代表文档数中的一个节点）

　　　　* 特点：所有dom对象都可以被认为是一个节点

　　　　* 方法：

　　　　　　*  CRUD  dom数：

　　　　　　　　*  appendChild()：向节点的子节点列表的结尾添加新的子节点

　　　　　　　　*  removeChild()：删除（并返回）当前节点的指定子节点

　　　　　　　　*  replaceChild()：用新节点替换一个子节点

　　　　*  属性：

　　　　　　*  parentNode  返回节点的父节点

    <style>

        div{

            border: 1px solid black;

        }

        #div1{

            width: 200px;

            height: 200px;

        }

        #div2{

            width: 100px;

            height: 100px;

        }

        #div2{

            width: 50px;

            height: 50px;

        }

    </style>

</head>

<body>

    <div id="div1">

        <div id="div2">div2</div>

       div1

    </div>

    <a href="javascript:void(0)" id="del">删除子节点</a>

    <a href="javascript:void(0)" id="add">添加子节点</a>

    <!-- <input type="button" value="删除子节点" id="del"> -->

    <script>

        //1、获取超链接

        var element_a = document.getElementById("del");

        //2、绑定单击事件

        element_a.onclick = function(){

            var div1 = document.getElementById("div1");

            var div2 = document.getElementById("div2");

            div1.removeChild(div2)

        }

        /*

            超链接功能：

                1、可以被点击：样式

                2、点击后跳转href指定的url

            需求：保留1功能，去掉2功能

                实现：href="javascript:void(0)"

        */

         //1、获取超链接

         var element_add = document.getElementById("add");

        //2、绑定单击事件

        element_add.onclick = function(){

            var div1 = document.getElementById("div1");

            //给div1添加子节点

            //创建div节点

            var div3 = document.createElement("div");

            div3.setAttribute("id","div3");

            div1.appendChild(div3);

        }

        var div2 = document.getElementById("div2")

        var div1 = div2.parentNode

        alert(div1)

    </script>

</body>

二、HTML DOM

　　1、标签体的设置和获取：innerHTML

　　2、使用html元素对象的属性

　　3、控制样式

　　　　1、使用元素的style属性来设置，如：

    <div id="div1">

        div

    </div>

    <script>

        var div1 = document.getElementById("div1");

        div1.onclick = function(){

            //修改样式方式1

            div1.style.border = "1px solid red";

            div1.style.width = "200px";

            //font-size --> fontSize

            div1.style.fontSize = "20px";

        }

    </script>

　　　　2、提前定义好类选择器的样式，通过元素的className属性来设置class属性值

        //修改方式2

        //className

        var div2 = document.getElementById("div2");

        div2.onclick = function(){

            div2.className = "d2"

        }

javascript基础：dom的更多相关文章

  1. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  2. JavaScript基础 -- DOM

    一.DOM全称 文档对象模型(Document Object Model) 二.DOM是什么 DOM可以说是制作动态页面的强有力工具.DOM不是JavaScript语言的一部分,而是内置在浏览器中的一 ...

  3. JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）

    DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...

  4. Javaweb学习笔记——（三）——————JavaScript基础&DOM基础

    day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...

  5. JavaScript基础--DOM对象加强篇（十四）

    1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 ...

  6. JavaScript基础DOM介绍和常用操作（5）

    day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html JavaScript引入方式 location对象 window.location ...

  7. JavaScript基础 DOM的操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 一.属性和方法: window对象——浏览器 ...

  8. javascript基础DOM操作

    DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象:M(模型)可以 ...

  9. javascript基础-DOM原理

    解释清楚DOM原理并不是一件容易的事,但是任何一个前端工程师,都必须牢牢掌握它. DOM整体架构: 图解: DOM,即针对XML文档的应用程序编程接口(API).通俗一点说,HTML属于XML的一种, ...

  10. 从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

    1:DOM(Document  Object  Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DO ...

随机推荐

  1. P1280 尼克的任务 /// DP(选择性地)

    题目大意: https://www.luogu.org/problemnew/show/P1280 题解 手推一遍思路更清晰 #include <bits/stdc++.h> using ...

  2. Print Article /// 斜率优化DP oj26302

    题目大意: 经典题 数学分析 G(a,b)<sum[i]时 a优于b G(a,b)<G(b,c)<sum[i]时 b必不为最优 #include <bits/stdc++.h& ...

  3. virtualbox虚拟机下的cdlinux找不到无线网卡的解决方法

    virtualbox虚拟机下的cdlinux找不到无线网卡的解决方法 自己解决了,记录一下. cdlinux 带reaver1.4的版本 http://pan.baidu.com/share/link ...

  4. CAS机制详解

    目录 1. 定义 2. 实现原理 3. 无版本号CAS实战说明 4. CAS机制在Java中的应用 5. CAS的缺点 1. CPU开销过大 2. 不能保证代码块的原子性 3. ABA问题 6. JA ...

  5. GridView编辑删除

    A前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.asp ...

  6. System.UriFormatException: Invalid URI 解决方法

    mobox 企业网页登陆界面,sa 登陆后 提示 System.UriFormatException: Invalid URI: The URI scheme is not valid. at Sys ...

  7. thinkphp 数据写入

    直线电机优势 ThinkPHP的数据写入操作使用add方法,使用示例如下: $User = M("User"); // 实例化User对象 $data['name'] = 'Thi ...

  8. E. Present for Vitalik the Philatelist 反演+容斥

    题意:给n个数\(a_i\),求选一个数x和一个集合S不重合,gcd(S)!=1,gcd(S,x)==1的方案数. 题解:\(ans=\sum_{i=2}^nf_ig_i\),\(f_i\)是数组中和 ...

  9. Android数据适配器Adapter简介

    1.简介 Adapter是用来帮助填充数据的中间桥梁,简单点说就是:将各种数据以合适的形式显示到view上,在常见的View(List View,Grid View)等地方都需要用到Adapter! ...

  10. vue-cli2.0+webpack 项目搭建

    一:准备工作 安装nodejs + 安装webpack + 配置环境变量 => 确保在dos界面的任何路径都都可直接使用命令 二:搭建项目 1.全局安装vue脚手架  [DOS界面] npm i ...