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

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

JavaScript DOM常用操作代碼匯總

瀏覽:58日期: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
相關文章:
主站蜘蛛池模板: 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 中国玩具展_玩具展|幼教用品展|幼教展|幼教装备展 | 海尔生物医疗四川代理商,海尔低温冰箱四川销售-成都壹科医疗器械有限公司 | 橡胶膜片,夹布膜片,橡胶隔膜密封,泵阀设备密封膜片-衡水汉丰橡塑科技公司网站 | 长信科技产业园官网_西安厂房_陕西标准工业厂房 | 沈阳真空机_沈阳真空包装机_沈阳大米真空包装机-沈阳海鹞真空包装机械有限公司 | 撕碎机,撕破机,双轴破碎机-大件垃圾破碎机厂家 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 气体检测仪-氢气检测仪-可燃气体传感器-恶臭电子鼻-深国安电子 | 防水套管厂家_刚性防水套管_柔性防水套管_不锈钢防水套管-郑州中泰管道 | 高通量组织研磨仪-多样品组织研磨仪-全自动组织研磨仪-研磨者科技(广州)有限公司 | 单螺旋速冻机-双螺旋-流态化-隧道式-食品速冻机厂家-广州冰泉制冷 | 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | PTFE接头|聚四氟乙烯螺丝|阀门|薄膜|消解罐|聚四氟乙烯球-嘉兴市方圆氟塑制品有限公司 | 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 卫生人才网-中国专业的医疗卫生医学人才网招聘网站! | DWS物流设备_扫码称重量方一体机_快递包裹分拣机_广东高臻智能装备有限公司 | 信阳网站建设专家-信阳时代网联-【信阳网站建设百度推广优质服务提供商】信阳网站建设|信阳网络公司|信阳网络营销推广 | 电缆故障测试仪_电缆故障定位仪_探测仪_检测仪器_陕西意联电气厂家 | BESWICK球阀,BESWICK接头,BURKERT膜片阀,美国SEL继电器-东莞市广联自动化科技有限公司 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 智能垃圾箱|垃圾房|垃圾分类亭|垃圾分类箱专业生产厂家定做-宿迁市传宇环保设备有限公司 | 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | 上海新光明泵业制造有限公司-电动隔膜泵,气动隔膜泵,卧式|立式离心泵厂家 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | 佛山市钱丰金属不锈钢蜂窝板定制厂家|不锈钢装饰线条|不锈钢屏风| 电梯装饰板|不锈钢蜂窝板不锈钢工艺板材厂家佛山市钱丰金属制品有限公司 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 2025第九届世界无人机大会 | 地图标注-手机导航电子地图如何标注-房地产商场地图标记【DiTuBiaoZhu.net】 | 无锡门窗-系统门窗-阳光房-封阳台-断桥铝门窗厂[窗致美] | 运动木地板价格,篮球馆体育运动木地板生产厂家_欧氏地板 | 耐腐蚀泵,耐腐蚀真空泵,玻璃钢真空泵-淄博华舜耐腐蚀真空泵有限公司 | 电动球阀_不锈钢电动球阀_电动三通球阀_电动调节球阀_上海湖泉阀门有限公司 | 不锈钢螺丝 - 六角螺丝厂家 - 不锈钢紧固件 - 万千紧固件--紧固件一站式采购 | 呼末二氧化碳|ETCO2模块采样管_气体干燥管_气体过滤器-湖南纳雄医疗器械有限公司 | 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 | 航拍_专业的无人机航拍摄影门户社区网站_航拍网 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 合肥网络推广_合肥SEO网站优化-安徽沃龙First | 气动隔膜泵-电动隔膜泵-循环热水泵-液下排污/螺杆/管道/化工泵「厂家」浙江绿邦 | 电解抛光加工_不锈钢电解抛光_常州安谱金属制品有限公司 |