码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript--HTML DOM基础知识

时间:2019-08-19 09:20:18      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:16px   nts   使用   insert   w3c   之间   的区别   size   如何获取   

1.HTML DOM是什么,以及它的作用:

  w3c对DOM有一系列的解释和定义,用自己理解的话来说就是:HTML DOM是html的标准对象模型,可以使JavaScript去操作(获取,修改,删除,添加,)HTML对象。

2.DOM 如何获取HTML元素?

  在DOM中访问HTML元素的方法有多种 :

  1.DOM 节点:

    (在核心DOM中访问父子,兄弟节点)

    node.parentNode    访问父节点

    node.childNodes          访问所有子节点

    node.firstChild    访问第一个子节点

    node.lastChild    访问最后一个子节点

    node.nextSibling   访问下一个兄弟节点

    node.previousSibling 访问上一个兄弟节点

    (由核心DOM精简出的HTML DOM访问父子、兄弟节点)

    element.parentElement      访问父元素

    element.childern         访问所有子元素

    element.firstElementChild     访问第一个子元素

    element.lastElementChild     访问最后一个子元素

    element.nextElementChild       访问下一个子元素

    element.perviousElementChild    访问上一个子元素

  这两者之间的区别就在于 核心DOM无论访问的是父子节点还是兄弟节点 都会将空格,换行符当做节点 这就会造成使用的不便,而精简的HTML DOM 只会访问HTML中的元素。

  2.DOM 方法

    getElementById(id属性值)        返回带有id的元素

    getElementsByTagName(标签名)       返回指定标签名的所有元素 以数组的形式存储

    getElementsByClassName(class属性值)  返回是定类名的所有元素 以数组形式存储

    getElementsByName(name属性值)

  3.css选择器

    document.querySelectorAll("")  通过选择器获取元素  返回一个数组

    document.querySelector("")   通过选择器获取元素  返回一个元素

3.DOM 如何修改HTML元素的内容、属性、样式

  1.修改其内容(element表示某个元素)

    对于双标签:element.innerHTML = “……”

    对于单标签:element.value = " ……"

  2.修改其属性

    element.class = " " 修改class属性

    element.href  =  " " 修改超链接href属性

  3.修改其样式

    element.style.fontSize = "16px"  修改字体大小

4.DOM 如何添加HTML元素

  1.追加

    element.appendChild(elem)   向父元素element追加一个子元素elem

  2.插入

    element.insertBefore(elem,oldElem)  向父元素的oldElem元素前插入一个elem元素

  3.替换

    element.replaceChild(elem,oldElem)  将父元素element的oldElem替换为elem元素

5.DOM如何删除HTML元素

  parentNode.removeChild(elem)  删除父节点的elem子节点

  

  

 

Javascript--HTML DOM基础知识

标签:16px   nts   使用   insert   w3c   之间   的区别   size   如何获取   

原文地址:https://www.cnblogs.com/blogzzy/p/11374060.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!