js-dom操作的属性及方法

    xiaoxiao2025-06-16  6

    1. 获取和设置属性

    1)getAttribute函数 获取属性

    getAttribute函数不属于document对象,所以不能同过document对象调用,只能通过元素节点对象调用。

    用法:object.getAttribute(attribute);

    当元素节点没有要寻找的属性时将会返回null

    var paras = document.getElementsByTagName("p"); for(var i = 0; i < paras.length; i++){ var title_text = paras.getAttribute("title"); if(title_text) alert(title_text); }

    2)setAttribute函数 设置属性

    setAttribute完成了两项操作:先创建这个属性,然后设置它的值。如果存在这个属性,则原来的值会被覆盖掉。

    用法:object.setAttribute(attribute,value);

    var paras = document.getElementsByTagName("p"); for(var i = 0; i < paras.length; i++){ var title_text = paras[i].getAttribute("title"); if(title_text){ paras[i].setAttribute("title","今天天气真晴朗"); alert(paras[i].getAttribute("title")); } }

    2. 获取子节点

    1)childNodes属性

    获取元素下所有的子节点,但是不仅仅是元素节点,会将文本节点等都选择。

    用法:element.childNodes

    var childs = document.getElementsByTagName('p')[0].childNodes; //获取p元素的所有子节点

    2) firstChild属性

    获取第一个子元素。

    用法:node.firstChild

    等价于:node.childNodes[0]

    var firstChild = document.getElementsByTagName('p').firstChild; //获取p元素的第一个子节点

    3)lastChild属性

    获取最后一个子元素。

    用法:node.lastChild

    等价于:node.childNodes[node.childNodes.length - 1];

    var lastChild = document.getElementsByTagName('p').lastChild; //获取p元素的最后一个子节点

    3. 获取节点类型与设置节点文本

    1)nodeType属性

    获取节点的类型。

    用法:node.nodeType

    nodeType属性总共有12种可取值,以下为最常用的三种,其它的用的很少,不列出来了。

    元素节点的nodeType属性值是1;

    属性节点的nodeType属性值是2;

    文本节点的nodeType属性值是3;

    document.getElementsByTagName('p')[0].nodeType //获取p元素的节点类型

    2)nodeValue属性

    获取节点的值

    用法:node.nodeValue

    需要注意的地方是,比如获取p元素的文本节点,document.getElementsByTagName('p')[0].nodeValue得到的并不是包含在p元素中的文本,而是返回一个null值。

    而是需要得到p标签中的第一个子节点,document.getElementsByTagName('p')[0].childNodes[0].nodeValue

    设置节点的值

    用法:node.nodeValue = text;

    3)nodeName属性

    判断一个元素是否是一个图片元素

    var imgNode = document.getElementsTagName('img')[0]; if(imgNode.nodeName != "IMG") return false;注意:nodeName属性返回的是大写字母的值

    转载请注明原文地址: https://ju.6miu.com/read-1300022.html
    最新回复(0)