dom笔记

作者: 一包 | 来源:发表于2018-05-03 21:48 被阅读0次

节点

每一个节点都是一个对象;

  • 元素节点(标签如<body>)
  • 属性节点(所有的属性都被元素包含,如<p>中的title="A picture")
  • 文本节点(文本)

获取元素

获取的都是对象,因为文档中每一个元素都是对象;

  • getElementById
  • getElementsByTagName
    返回一个对象数组,允许把一个通配符作为它的参数,如:
alert(document.getElementsByTagName("*").length) 
//可知道某份文档里共有多少个元素节点
  • getElementsByClassName
    返回一个对象数组,使用这个方法还可以查找那些带有多个类名的元素,只需在字符串参数中用空格分隔类名即可。如:
alert(document.getElementsByClassName("important sale").length)

注意:即使在元素的class属性中,类名的顺序是"sale important",也会照样匹配该元素。不仅类名的实际顺序并不重要,就算元素还带有更多类名也没关系。

获取和设置属性

  • getAttribute
var paras=document.getElementByTagName("p")
for(var i=0;i<paras.length;i++){
    alert(paras[i].getAttribute("title"));
}

以上如果没有title属性,则getAttribute("title")方法会返回null值;

getAttribute方法不属于document对象,所以不能通过docume对象调用,只能通过元素节点对象调用。

  • setAttribute
    和getAttribute一样,只能用于元素节点;
xx.setAttribute("title","a list of goods")

childNodes属性

在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组;

var body_element=document.getElementByTagName('body')[0];
alert(body_element.childNodes.length);

nodeType属性

每一个节点都有nodeType属性。

node.nodeType

nodeType的值是一个数字

  • 元素节点的nodeType属性值是1
  • 属性节点的属性值是2
  • 文本节点的属性值是3

nodeValue属性

使用 nodeValue属性可以改变一个文本节点的值

如:<p id="description">A tree</p>

var desription=document.getElementById("description");
alert(description.nodevalue);
//null,因为p元素本身的nodeVlue值是一个空值,我们真正需要的是<p>所包含的文本的值
alert(description.childNodes[0].nodeValue);//A tree

firstChild和lastChild属性

相关文章

  • 《DOM探索之基础详解篇》笔记

    慕课网 DOM探索之基础详解篇 学习笔记 一、认识DOM DOM 提供了用程序来动态控制HTML的接口。 DOM级...

  • 前端工程师之DOM编程艺术(持续更新)

    @(书籍阅读)[网易云课堂|DOM] DOM编程艺术 网易前端微专业之《DOM编程艺术》笔记,持续更新; 更新事件...

  • React 笔记二:react-dom

    React 笔记二:react-dom 对应的API 注:react-dom/server是专门针对server端...

  • 锋利的jQuery笔记1

    标签: 我的笔记 认识jQuery jQuery对象和DOM对象 DOM对象可以通过javascript获取。 j...

  • dom笔记

    节点 每一个节点都是一个对象; 元素节点(标签如 ) 属性节点(所有的属性都被元素包含,如 中的title="A ...

  • DOM笔记

    childNodes获取子节点,子节点只有一层由于兼容性问题需要nodeType来进行判断比如3是文本类型 1是元...

  • DOM笔记

    DOM笔记获取元素获取指定元素获取子元素&兄弟元素&父元素获取第一&最后一个子元素节点操作克隆节点 - clone...

  • DOM笔记

    1.dom document就代表整个文档。包含html文档。 1.拿元素的方法: 1.getElementsBy...

  • DOM 事件流

    这篇笔记主要简述下 DOM 事件流 - DOM Event Flow. 用于理解事件捕获与冒泡. 什么是事件 事件...

  • jQuery笔记2

    DOM操作之 属性与样式在上一篇jQuery笔记1中把DOM元素节点的常用操作都介绍了一遍, 这一篇笔记仍是有关j...

网友评论

      本文标题:dom笔记

      本文链接:https://www.haomeiwen.com/subject/fpzlrftx.html