关于JS（原生js+jq）中获取设置或者删除元素属性和获取元素值

Posted 2021-03-22 慕念

一、JS获取、设置或者删除元素属性

原生js：

　　$("要获取属性class/id名").getAttribute("属性");

　　$("要设置属性class/id名").setAttribute("属性"，"属性值");

　　$("要删除属性class/id名").removeAttribute("属性");

jq：　　

　　$("要获取属性class/id名").attr("属性");

　　$("要设置属性class/id名").attr("属性"，"属性值");

　　$("要删除属性class/id名").removeAttr("属性");

/*js获取属性*/
    var temp = document.getElementById(‘test1‘).getAttribute(‘data‘);

/*jq获取属性*/
    var temp = $(‘.test1‘).attr(‘class‘);

 

/*js设置属性*/
    var temp2= document.getElementById(‘test2‘).setAttribute(‘data‘,‘self-name-2‘);

/*jq设置属性*/
    var temp2= $(‘.test2‘).attr(‘class‘,‘test-spe‘);

 

/*js删除属性*/
      var temp = document.getElementById(‘test1‘).removeAttribute(‘data‘);

/*jq删除属性*/
      var temp = $(‘.test1‘).removeAttr(‘data‘);

二、获取JS的内容或值

　原生javascript的方法: innerhtml、outerHTML、innerText 、outerText、value。

　jQuery中的方法: text()、html()，val()。

1.原生javascript的方法

原生javascript的方法: innerHTML、outerHTML、innerText 、outerText、value。

(1)、innerHTML属性：innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。

<script type="text/javascript" charset="utf-8">
        document.getElementById("box").innerHTML="这是innerHTML"
</script>

(2)、outerHTML属性：与innerHTML相同。

<script type="text/javascript" charset="utf-8">
        document.getElementById("box").outerHTML="<p>This is a paragraph.</p>"
</script>

等同于

var p = document.createElement("p"); 
p.appendChild(document.createTextNode("This is a paragraph.")); 
div.parentNode.replaceChild(p,box);

注意：replaceChild() 方法用新节点替换某个子节点；使用：node.replaceChild(newnode,oldnode)

(3)、 innerText 属性：操作元素中包含的所有文本内容，包括子文档树中的文本；

<script type="text/javascript" charset="utf-8">
    var text = document.getElementById("box").innerText;
    alert(text)
</script>

(4)、outerText属性：除了作用范围扩大到了包含 调用它的节点之外，outerText 与innerText 基本上没有多大区别。

<script type="text/javascript" charset="utf-8">
    var text = document.getElementById("box").outerText;
    alert(text)
</script>

(5)、value：获取文本框的值（主要用于获取表单元素的值如input, select 和 textarea）；

按钮中用的value 指的是 按钮上要显示的文本 比如‘确定,删除 等等字样‘
复选框用的value 指的是 这个复选框的值
单选框用的value 和复选框的作用一样
下拉菜单用的value 是 列表中每个子项的值
隐藏域用的value 是 框里面显示的内容

<script type="text/javascript" charset="utf-8">
    var text = document.getElementById("inbox").value;
    alert(text)
</script>

注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 属性不适用于 <input type="file">。

2.jQuery中的方法

　jQuery中的方法: text()、html()，val()。

(1)、text():设置或者获取所选元素的文本内容

　　①、text（）：无参；返回的值是一个String；

　　①、text（val）：有参；返回的值是一个Object；

(2)、html():设置或者获取所选元素的内容(包括html标记)

　　①、html（）：无参；返回的值是一个String；

　　①、html（val）：有参；返回一个jquery对象。；

(3)、val():主要用于获取表单元素的值如input, select 和 textarea；

　　①、val（）：无参；返回的值是一个String；

　　①、val（val）：有参；返回一个jquery对象。；