js进阶篇——DOM对象控制HTML元素

素颜马尾好姑娘i 2022-05-21 05:00 239阅读 0赞

问题一：getElementsByName()     通过获取name属性的值来获取到dom元素。由于name属性不唯一，所以获取到的可能会是一个数组，对这个数组可以用length属性带出其长度。

例：

alert(document.getElementsByName("myt").length);        结果，6    /\*这就表明了有6个name属性值相同的元素\*/

问题二：getElementsByTagName()    通过获取html标签来获取节点，同样，获取到的也是一个数组，也有length属性

alert(document.getElementsByTagName("input"));         结果，2          /\*表明有两个input标签\*/

问题三：getAttribute("属性名称");

例：

var **con**=document.getElementsByTagName("li");  
    for (var i=0; i< con.length;i++)\{  
    var text = con\[i\].**getAttribute**("title");  
      if(text!=null)  
      \{  
        document.write(text+"<br>");  
      \}  
    \}

结果，选中元素获得title的值，也可以con\[i\].**getAttribute**("id")，通过id获取到id的值

问题四：setAttribute()方法，该方法为选中的元素设置相应的属性和值

语法：setAttribute(属性，值)               例：setAttribute("title","hello world！")

问题五：节点属性    详细解释元素节点，属性节点和文本节点详见这篇文章，清晰简单【https://blog.csdn.net/u010792238/article/details/23533801】

从这篇文章我们可以知道，DOM节点有三个重要的属性，nodeName nodeValue  nodeType

那么根据节点类型不同得出的这三个属性值肯定也就有所不同。

具体用法：节点对象.属性名

例：

var abc = document.getElementById("id");

abc.nodeName;

结果:SPAN

问题六：childNodes    获取选中节点的子节点，是一个数组，有length属性

用法：节点对象.childNodes       注意，这样获得的是一个数组对象，如果直接document.write的话是看不到详细的东西，应该再点一个属性     例：节点对象.childNodes.nodeName

例：

var \_div = document.getElementsByTagName("div");  
 var \_myarr = \_div\[0\].childNodes;  
 for(i=0;i<\_myarr.length;i++)\{  
     document.write(\_myarr\[i\].nodeName+"<br>");  
     document.write(\_myarr\[i\].nodeValue+"<br>");  
     document.write(\_myarr\[i\].nodeType+"<hr>");

以上代码实现了获取第一个div元素，并得到他的子节点，同时输出该节点的三大属性，节点名，节点值，节点类型。

注意：除了IE浏览器，其他浏览器会将标签后面的空格当做子节点。

问题七：firstChild   lastChild    获取某节点下的第一个子节点和最后一个子节点，等同于childNodes\[0\] 和childNodes\[length-1\]

同上使用，节点对象.firstChild/lastChild.nodeName

parentNode  获取某节点的父节点，注意，父节点只有一个。

例：

var mylist = document.getElementById("tcon");   
var \_abc =  mylist.parentNode.parentNode.parentNode.lastChild

document.write("<hr>"+\_abc.innerHTML);

像以上代码展示的那样，可以找到父节点再找到父节点以此类推去找到目标节点。

nextSibling(下一个兄弟节点)   previousSibling（前一个兄弟节点）

使用方法依旧同上：节点对象.nextSibling/previousSibling.nodeName

例：

![70][]

以上代码核心之处就是加了一个判断，因为之前我们提到过，除了IE，其他浏览器是会将标签后面的空白解析成一个子节点，所以我们如果要保证获取到的节点就是我们想要的节点就需要加个方法判断一下。主要是判断得到的节点的nodeType是不是等于1，也就是说，如果不是1，就是空白，我们就要获取下一个节点。

### **总结：** ###

这里对节点相关知识点做一个总结。DOM节点分为几大类，那常用的节点我们前面介绍了，元素节点、属性节点、文本节点。这些节点呢也都是有属性的，nodeName nodeValue  nodeType 。那在实际的操作当中我们经常要定位到某个元素，然后进行操作，在以上介绍的几个定位节点的方法中，我们也知道了有哪些方法。首先我们可以根据id或者name或者TagName来获取某个节点，获得了该节点以后我们可以有childNodes获取其下的所有子节点，是一个数组对象。还可以用parentNode来获得当前节点的父节点。为了更加方便快捷的定位节点，还有firstChild    lastChild    nextSibling    previousSibling 。同时，数组还有length属性，也可以通过下标获得某个节点。

问题八  appendChild  插入节点，在选中的节点的子节点队列中的末位插入一个节点。

例：要想在以下页面中增加一个内容为PHP的li选项

![70 1][]

var \_test = document.getElementById("test");

var \_test2 = document.createElement("li");

\_test2 .innerHTML = "PHP";

\_test .appendChild(\_test2 );

结果：

![70 2][]

问题九：insertBefore(newnode,node)          插入一个节点newnode在node之前

例：

![70 3][]

以上代码讲解一下。想要在<li>HTML</li>前面插入一个节点。要做的第一件事，获取到插入节点位置的父节点。第二，创建要插入的节点并赋上内容。第三，父节点调用insertBefore()方法，将创建的节点对象，和要插入的位置的后一个节点对象放进方法中。这里要插入的节点对象是\_li，要插入位置的节点对象是HTML那个。我们之前说过，要定位到一个节点有很多方法，我用的是lastChild,也可以通过childNodes\[1\]来获得哈。另外可以直接在第二个参数的位置像我那样写，也可以在上面的代码中用一个变量接收，再当做第二个参数传进去。

[70]: /images/20220521/7ba76a65f5c74cce87f88a730c6d3d97.png
[70 1]: /images/20220521/ea5831dea77f470b8e7d7ba8d1edfa97.png
[70 2]: /images/20220521/4b288a1e55844d3a9058c813d464af0d.png
[70 3]: /images/20220521/bd4c5c5c7b5d4195bb061f395e984ed4.png