电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript DOM常用操作代碼匯總

瀏覽:61日期:2023-10-22 14:56:52

1.理解DOM:

DOM(Document Object Model ,文檔對象模型)一種獨立于語言,用于操作xml,html文檔的應用編程接口。

怎么說,我從兩個角度理解:

對于JavaScript,為了能夠使JavaScript操作Html,JavaScript就有了一套自己的dom編程接口。

對于Html,dom使得html形成一棵dom樹,類似于一顆家族樹一樣,一層接一層,子子孫孫。

所以說,有了DOM,在我看來就是相當于JavaScript拿到了鑰匙一樣可以去操作Html的每一個節點,觸摸Html每寸肌膚。(咳。。。)

2.介紹Html的DOM樹:

說明:html標簽通過瀏覽器的解析后才會形成dom樹,此后HTML中的每個標簽元素,屬性,文本都能看做是一個DOM的節點,JavaScript都能通過dom的提供的編程接口操作到每個節點,去了解瀏覽器的渲染機制能夠幫助我們了解dom。

Html代碼:

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>dom</title></head><body> <div> <a href='http://www.hdgsjgj.cn/bcjs/www.baidu.com' rel='external nofollow' >百度</a> </div></body></html>

對應的DOM樹結構圖:

JavaScript DOM常用操作代碼匯總

3.認識JavaScript中的DOM編程接口:

上面說了html形成的dom樹,接著說下通過js的dom編程接口去操作這棵dom樹。

JavaScriptDOM操作的常用方法和屬性::

常用方法:

獲取節點:

document.getElementById(idName) //通過id號來獲取元素,返回一個元素對象 document.getElementsByName(name) //通過name屬性獲取id號,返回元素對象數組 document.getElementsByClassName(className) //通過class來獲取元素,返回元素對象數組(ie8以上才有) document.getElementsByTagName(tagName) //通過標簽名獲取元素,返回元素對象數組

獲取/設置元素的屬性值:

element.getAttribute(attributeName) //括號傳入屬性名,返回對應屬性的屬性值 element.setAttribute(attributeName,attributeValue) //傳入屬性名及設置的值

創建節點Node:

document.createElement('h3') //創建一個html元素,這里以創建h3元素為例 document.createTextNode(String); //創建一個文本節點; document.createAttribute('class'); //創建一個屬性節點,這里以創建class屬性為例

增添節點:

element.appendChild(Node); //往element內部最后面添加一個節點,參數是節點類型 elelment.insertBefore(newNode,existingNode); //在element內部的中在existingNode前面插入newNode

刪除節點:

element.removeChild(Node) //刪除當前節點下指定的子節點,刪除成功返回該被刪除的節點,否則返回null

常用屬性:

獲取當前元素的父節點 :

element.parentNode //返回當前元素的父節點對象

獲取當前元素的子節點:

element.chlidren //返回當前元素所有子元素節點對象,只返回HTML節點 element.chilidNodes //返回當前元素多有子節點,包括文本,HTML,屬性節點。(回車也會當做一個節點) element.firstChild //返回當前元素的第一個子節點對象 element.lastChild //返回當前元素的最后一個子節點對象

獲取當前元素的同級元素:

element.nextSibling //返回當前元素的下一個同級元素 沒有就返回null element.previousSibling //返回當前元素上一個同級元素 沒有就返回null

獲取當前元素的文本:

element.innerHTML //返回元素的所有文本,包括html代碼 element.innerText //返回當前元素的自身及子代所有文本值,只是文本內容,不包括html代碼

獲取當前節點的節點類型:node.nodeType //返回節點的類型,數字形式(1-12)常見幾個1:元素節點,2:屬性節點,3:文本節點。

設置樣式:element.style.color=“#eea”; //設置元素的樣式時使用style,這里以設置文字顏色為例。

4.總結:

大家都會覺得用jQuery來操作dom會更加的方便且好用,因為jq對js的dom進行了封裝,使得我們Write Less, Do More。但是我覺得還是要總結一下原生js的dom,從根本上了解js對dom的操作,只會有利而無害。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 专业的新乡振动筛厂家-振动筛品质保障-环保振动筛价格—新乡市德科筛分机械有限公司 | 金联宇电缆总代理-金联宇集团-广东金联宇电缆实业有限公司 | 美名宝起名网-在线宝宝、公司、起名平台 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 偏心半球阀-电动偏心半球阀-调流调压阀-旋球阀-上欧阀门有限公司 | 建筑资质代办_工程施工资质办理_资质代办公司_北京众聚企服 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 铝合金重力铸造_铝合金翻砂铸造_铝铸件厂家-东莞市铝得旺五金制品有限公司 | 胶水,胶粘剂,AB胶,环氧胶,UV胶水,高温胶,快干胶,密封胶,结构胶,电子胶,厌氧胶,高温胶水,电子胶水-东莞聚力-聚厉胶粘 | 仿真植物|仿真树|仿真花|假树|植物墙 - 广州天昆仿真植物有限公司 | 精准猎取科技资讯,高效阅读科技新闻_科技猎 | 空心明胶胶囊|植物胶囊|清真胶囊|浙江绿键胶囊有限公司欢迎您! | 济南侦探调查-济南调查取证-山东私家侦探-山东白豹调查咨询公司 密集架|电动密集架|移动密集架|黑龙江档案密集架-大量现货厂家销售 | 杭州荣奥家具有限公司-浙江办公家具,杭州办公家具厂 | 春腾云财 - 为企业提供专业财税咨询、代理记账服务 | 广州展览设计公司_展台设计搭建_展位设计装修公司-众派展览装饰 广州展览制作工厂—[优简]直营展台制作工厂_展会搭建资质齐全 | 经济师考试_2025中级经济师报名时间_报名入口_考试时间_华课网校经济师培训网站 | 液氨泵,液化气泵-淄博「亚泰」燃气设备制造有限公司 | 风淋室生产厂家报价_传递窗|送风口|臭氧机|FFU-山东盛之源净化设备 | 河南mpp电力管_mpp电力管生产厂家_mpp电力电缆保护管价格 - 河南晨翀实业 | 照相馆预约系统,微信公众号摄影门店系统,影楼管理软件-盟百网络 | 深圳品牌设计公司-LOGO设计公司-VI设计公司-未壳创意 | 佛山市钱丰金属不锈钢蜂窝板定制厂家|不锈钢装饰线条|不锈钢屏风| 电梯装饰板|不锈钢蜂窝板不锈钢工艺板材厂家佛山市钱丰金属制品有限公司 | 污水提升器,污水提升泵,地下室排水,增压泵,雨水泵,智能供排水控制器-上海智流泵业有限公司 | 膜结构_ETFE膜结构_膜结构厂家_膜结构设计-深圳市烨兴智能空间技术有限公司 | 环氧树脂地坪漆_济宁市新天地漆业有限公司 | 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 活性炭厂家-蜂窝活性炭-粉状/柱状/果壳/椰壳活性炭-大千净化-活性炭 | 金属抛光机-磁悬浮抛光机-磁力研磨机-磁力清洗机 - 苏州冠古科技 | 微妙网,专业的动画师、特效师、CG模型设计师网站! - wmiao.com 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 深圳公司注册-工商注册代理-注册公司流程和费用_护航财税 | 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | _网名词典_网名大全_qq网名_情侣网名_个性网名| 2025第九届世界无人机大会 | 申江储气罐厂家,储气罐批发价格,储气罐规格-上海申江压力容器有限公司(厂) | [品牌官网]贵州遵义双宁口腔连锁_贵州遵义牙科医院哪家好_种植牙_牙齿矫正_原华美口腔 | 烟气在线监测系统_烟气在线监测仪_扬尘检测仪_空气质量监测站「山东风途物联网」 | 品牌设计_VI设计_电影海报设计_包装设计_LOGO设计-Bacross新越品牌顾问 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 |