javascript 如何获得html DOM节点的属性值

先给你看下面两段代码：

<div id="div1">test!</div>

<script>

   consolelog(documentgetElementById("div1"));  //这个能够获得值

</script><script>

   consolelog(documentgetElementById("div1"));  //这个不能获得值！

</script>

<div id="div1">test!</div>

看出原因没有？当js代码是先于html运行时，是获取不到DOM元素的！因为这时候该DOM元素尚未加载到内存，相当于不存在！

要想实现js代码放到任何位置都能获得DOM元素，就要保证代码在页面完全加载完毕后才开始运行，比如：

<script>

   windowonload=function(){  //网页完全加载完毕才会触发这个事件

      consolelog(documentgetElementById("div1")); //这时候就能获得了

   }

</script>

<div id="div1">test!</div>

##1访问/获取节点

documentgetElementById(id); //返回对拥有指定id的第一个对象进行访问

documentgetElementsByName(name);//返回带有指定名称的节点集合 注意拼写:Elements

documentgetElementsByTagName(tagname);//返回带有指定标签名的对象集合　  注意拼写：Elements

documentgetElementsByClassName(classname);  //返回带有指定class名称的对象集合 注意拼写：Elements

##2创建节点/属性

documentcreateElement(eName);//创建一个节点

documentcreateAttribute(attrName); //对某个节点创建属性

documentcreateTextNode(text);　//创建文本节点

##3添加节点

documentinsertBefore(newNode,referenceNode);　 //在某个节点前插入节点

parentNodeappendChild(newNode);//给某个节点添加子节点

##4复制节点

cloneNode(true | false);//复制某个节点  参数：是否复制原节点的所有属性

##5删除节点

parentNoderemoveChild(node);//删除某个节点的子节点 node是要删除的节点

注意：为了保证兼容性，要判断元素节点的节点类型(nodeType)，若nodeType==1，再执行删除 *** 作。通过这个方法，就可以在 IE和 Mozilla 完成正确的 *** 作。

nodeType属性可返回节点的类型最重要的节点类型是：

元素类型节点类型

元素element        1

属性attr        2

文本text        3

注释comments        8

文档document        9

##6修改文本节点

方法作用

appendData(data);将data加到文本节点后面

deleteData(start,length);将从start处删除length个字符

insertData(start,data);在start处插入字符,start的开始值是0;

replaceData(start,length,data);在start处用data替换length个字符

splitData(offset);在offset处分割文本节点

substringData(start,length);从start处提取length个字符

##7属性 *** 作

getAttribute(name)//通过属性名称获取某个节点属性的值

setAttribute(name,value);  //修改某个节点属性的值

removeAttribute(name);　 //删除某个属性

##8查找节点

parentObjfirstChild;//如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObjfirstChildfirstChild

parentObjlastChild;//获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用 parentObjlastChildlastChild

parentObjchildNodes;   //获得节点的所有子节点，然后通过循环和索引找到目标节点

##9获取相邻的节点

curtNodepreviousSibling;  //获取已知节点的相邻的上一个节点

curtNodenextSlbling;  // 获取已知节点的下一个节点

##10获取父节点

childNodeparentNode;//得到已知节点的父节点

##11替换节点

replace(newNode,oldNode);

下面是几个适合使用 refs 的情况：

管理焦点，文本选择或媒体播放。--- *** 作DOM

触发强制动画。

集成第三方 DOM 库。

1 thisrefs 字符串—已废弃—依然可以用

2 ReactcreateRef() 推荐使用-React163

import React, { Component } from 'react'

export default class App extends Component {

  constructor(){

    super();

    thismyInput=ReactcreateRef();

  }

  handdleClick=()=>{

    consoledir(thismyInputcurrent);

    thismyInputcurrentfocus();

  }

  render() {

    return (

      <div>

        <input type="text" ref={thismyInput} />

        点击让文本框获得焦点

      </div>

    )

  }

}

3 回调函数 ref={回调函数}

import React from 'react'

//孙子

function GrandCihld(props) {

  return (

      <div>

);

}

//儿子

function Child(props) {

return (

  <div> My input: <GrandCihld inputRef={propsinputRef} /></div>

);

}

//父亲

class App extends ReactComponent {

  handdleClick=()=>{

    consolelog("thisinputElement",thisinputElement);

    thisinputElementfocus();

  }

render() {

  return (

    <div>

      <Child inputRef={el => {

                thisinputElement = el;

                consolelog("匿名函数被调用了");

              }} />

      点击获取焦点

    </div>

  );

}

}

export default App;

1documentgetElementById("id名")

通过id属性的值查找，返回满足条件的第一个元素

2documentgetElementsByTagName("标签名")

通过标签名来获取页面中的元素。返回的是多个标签。

并不是真正的数组，但是我们可以想 *** 作数组一样 *** 作他（类数组）

3documentgetElementsByClassName("class名")

通过类名来获取页面中的元素。返回的也是多个标签

4documentgetElementsByName("表单元素name")

通过表单的name属性的值来获取元素

5documentquerySelector("div p a")

匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。

6documentquerySelectorAll("div")

获取所有满足条件的元素

7三个特殊节点

8childNodes 所有节点。包括各种节点

9fristChild 获取一个元素的第一个子节点

10lastChild 获取一个元素的最后一个子节点

11parentNode 获取一个元素的父节点

12previousSibling 获取一个元素的上一个兄弟节点

13nextSibling 获取一个元素的下一个节点

14children 只获取子元素

15firstElementChild 获取第一个元素子节点

16lastElementChild 获取最后一个元素子节点

17nextElementsibling 获取下一个元素兄弟节点

18previousElementsibling 获取上一个元素兄弟节点

19parentElement 获取父元素节点

20childElementCount 获取子元素的个数

1documentcreateElement(元素名) 创建一个元素节点

2documentcreateTextNode("这是新创建的一段文本") 创建一个文本节点

3appendChild() 添加元素到容器中

4insertBefore() 在一个节点前插入新节点

5removeChild() 删除子节点

6replaceChild() 替换子节点

7cloneNode() 克隆节点 传入true则复制所有节点

8setAttribute() 给元素设置属性

参数1：属性的名

参数2：属性的值

如果属性不存在，则添加；存在，则修改

9romveAttribute() 删除属性

参数：要删除的属性名

10getAttribute() 获取属性的值

参数：属性名

11访问 元素 id 名

boxid

12访问 元素 class 名

boxclassName

boxclassList 类数组

13获取标签名

boxtagName

boxnodeName

14innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本

15innerText属性

16outerHTML

跟innerHTML相比多包括了一个它自身

1访问行内（内联）样式表

2内部样式表和外部样式表的获取

getComputedStyle()

参数1：表示样式表所属的元素

参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传

兼容性问题

3获取元素实际的宽高

offsetWidth 宽

offsetHeight 高

4获取元素参考父容器的left 和 top

offsetLeft 距离左部

offsetTop 距离上部

offsetParent 查找这个元素的参照父容器

以上就是关于javascript 如何获得html DOM节点的属性值全部的内容，包括:javascript 如何获得html DOM节点的属性值、常用的dom的 *** 作方法、react获取真实DOM节点:等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！