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 id="AA">AA
            <span id="A1">A1</span>
            <span id="A2">A2</span>
            <span id="A3">A3</span>
        </div>
        <div id="BB">BB</div>
        <div>CC</div>
    </div>

    <script>
        // DOM 操作

        //获取标签对象:
        //根据ID获取
        // var X = document.getElementById(‘A1‘);

        //根据name获取
        // var X = document.getElementsByName()[0]

        //根据classname获取
        // var X = document.getElementsByClassName()[0]

        //根据相同标签名获取
        // var X = document.getElementsByTagName()[0]

        // 方法返回带有指定名称和命名空间的所有元素的 NodeList。
        // var X = document.getElementsByTagNameNS()[0]

        // //DOM属性:
        // console.log(X.nodeName);//(显示标签名)
        // //SPAN
        // console.log(X.nodeValue);//(显示value)
        // // null
        // console.log(X.innerHTML);//(显示HTML包括标签)
        // //A1
        // console.log(X.innerText);//(显示标签内容)
        // //A1

        var X = document.getElementById(‘AA‘);
        // DOM导航属性:
        // 父节点
        // console.log(X.parentNode);
        //第一个子元素
        // console.log(X.firstChild);
        //最后一个子元素
        // console.log(X.lastChild);
        //所有的子元素
        // console.log(X.childNodes);

        //方式一,直接在标签上定义事件

        // // 方式二:
        // var a11 = document.getElementsByName(‘a11‘)[0];
        // a11.onclick = function f1() {
        //     console.log("OK!!!")
        // }

        // //方式三(this方式)
        // var a11 = document.getElementsByName(‘a11‘)[0];
        // a11 = function f1() {
        //     this.onclick(console.log("OK!!!"))
        // }

    </script>


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

时间: 2024-10-08 09:21:08

JavaScript学习 - 基础(六) - DOM操作的相关文章

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

html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick="add()">add</button> </div> <div id="a3"> <button onclick="del()">del</button> </div> &l

JavaScript学习9:DOM操作表格及样式

DOM在操作生成HTML上,还是比较简单明了的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.那本文今天就来了解一下DOM如何操作表格和样式. 一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它. 下面我们就使用DOM来创建一个表格: <span style="font-size:18px;">window.onload=function(){ var table

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

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

javascript(js)基础之dom学习

dom学习 <img id='xx'.. onclick='aa()'> functon aa(){ xx1=document.getElementById("xx") //下面对xx1进行操作 } bom介绍:浏览器对象模型 因为浏览器企业太多,w3c定义了一个做浏览器的规范 规定 ----------- dom介绍/学习:文档对象模型 dom树 例子 <script language="JavaScript"> function text

JavaScript(第二十天)【DOM操作表格及样式】

DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作的table <table border="1" width="300"

Jquery基础之DOM操作

 一.jQuery对象与Dom对象的区别 一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的对象是一样的对象.所以一些新手就很迷惑,为什么${”#Element”}不能直接innerHTML,这就是原因所在,解决方式请看下文. jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有

JS基础与DOM操作(一)

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 alert("")警告对话框,作用是弹出一个警告对话框 confirm("")确定对话框,作用是弹出一个可供选择的确定对话框, 点击确定之后,它返回true,点击取消返回flase,可用变量来接收. prompt("")作用是弹出一个可以输入内容的对话框. 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记

js基础和dom操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局用:<style type="text/css"></style> 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效.只要放在HTML里就可以.用:<script type="text/javascript"><script> alert() 弹出警告对话框 :con

javascript学习笔记:DOM节点概述

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