【JavaScript总结】JavaScript语法基础：DOM

2024-05-28 09:21:54

->DOM的理解：文档对应dom树

->有了DOM能做什么：DOM的操作

html文档做为DOM树模型，DOM树的节点就是对象。对象会触发事件来执行一些事件代码。
C#中的事件是一个委托变量，JavaScript事件就是方法，浏览器的底层也会有很多触发函数的机制。
事件要做什么就写什么。例如：a标签添加点击事件

if(a.onclick!=null){var res=a.onclick();if(res===true){break;  //默认的正常跳转就不做了，返回了FALSE表示这个事件默认处理忽略不做}
}

标准DOM中定义了12中节点类型：
元素节点–1
文本节点–3
属性节点–2
获得方式：<node>.nodeType
获取节点

获取页面中指定id的节点对象：document.getElementByID("id的字符串“）
获取页面中所有标签名符合要求的标签的节点集合： document.getElementsByTagName(“标签名”）； //可以使用“*”
获取指定父节点下的所有名字符号要求的节点集合：父节点.getElementsByTagName("标签名称”）
元素节点的子节点：
　　<node>.childNodes
　　<node>.childNodes[0]
　　<node>.firstChild
　　<node>.lastChild
　　<node>.childNodes[<node>.childNodes.length-1]

修改节点：修改节点的属性和包含的文本内容
　标准修改方法：
　　<node>.setAttribute("属性名”，“值”)
　　<node>.getAttrubute("属性名”);
　DOM-html方法
　　<node>.属性名=值
　　var v=<node>.属性名
添加节点
　创建节点
　　　-->元素节点：var node=document.createElement("标签名”);
　　　-->文本节点:
　　　　　　　　var textNode=document.createTextNode(“文本”);
　　　　　　　　<节点>.innerHTML=“文本”；//这里可以使用html
　　　　　　　　<节点>.innerText=“文本”；//非标准
　　　-->属性节点:<节点>.setAttribute(…,…);
　追加节点
　　　-->追加到尾部
　　　　　　　　　　父节点.appendChild(子节点）；
　　　-->插入到中间（插入到某个元素的前面）
　　　　　　　　　　父节点.insertBefore(新元素，旧元素);
删除节点
　　　父节点．removeChild(子节点);
为节点添加事件对象
<node>.οnclick=function(){};

【JavaScript总结】JavaScript语法基础：DOM相关推荐

【JavaScript系列】JS基础语法_从变量到数组一网打尽_有教程有实战
[JavaScript系列]基础语法_从变量到数组一网打尽_有教程有实战 JavaScript基础语法目录基础语法延迟和异步脚本变量数据类型数据类型简介简单数据类型与复杂数据类型栈和堆 ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
JavaScript基础 -- DOM
JavaScript基础 -- DOM DOM 1.什么是DOM? 2.事件 3.文档的加载 3.DOM查询 4.DOM查询的其他方法 5.DOM增删改 6.使用DOM操作CSS 7.读取元素的样式 ...
读书笔记(06) - 语法基础 - JavaScript高级程序设计
写在开头本篇是小红书笔记的第六篇,也许你会奇怪第六篇笔记才写语法基础,笔者是不是穿越了. 答案当然是没有,笔者在此分享自己的阅读心得,不少人翻书都是从头开始,结果永远就只在前几章. 对此,笔者换了随 ...
视频教程-零基础JS入门系列课程(2)之JS语法基础精讲-JavaScript
零基础JS入门系列课程(2)之JS语法基础精讲螺钉课堂讲师,擅长Vue.React.ReactNative.NodeJS等前端框架及技术邓老师 ¥59.00 立即订阅扫码下载「CSDN程序员学院 ...
Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）
文章目录系列目录原项目地址第37课:并发编程在爬虫中的应用单线程版本多线程版本异步I/O版本总结第38课:抓取网页动态内容 Selenium 介绍使用Selenium 加载页面查找 ...
一起读JavaScript红宝书 —— 02语法基础（上）
JavaScript高级程序设计读书笔记,前端神作不容错过.原书近100万字,内容太多,故作笔记尽量在不缩减内容的情况下缩减字数,方便复习和回顾. 语法基础(上) 1. 语法 2. 关键字和保留字 3 ...
Javascript语法基础之按钮点击事件
Hello everyone,This is Kaylee. 这是一篇简单的JS语法基础内容,是在我学习过程中,比较难以记忆的知识点,我将搭配案例详解展示给大家,通过这种方式可以加深记忆,方便应用. ...
JavaScript函数和BOM及DOM编程（详细总结-无尿点）
JavaScript函数和BOM及DOM编程(详细总结-无尿点) javascript 函数一.javascript函数 1.1 概述 1.2 常见的系统函数 1.2.1 eval 1.2.2 pa ...
JavaScript 面试必备的基础知识梳理（71个知识点）
1. JavaScript简介 JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境. 如今,JavaScript 已经成为了与 HTML/CSS 完全集成的,使用 ...

最新文章

热门文章