JS判断字符串是否为json字符串，读取JSON数据 | js获取对象的方法 | 元素添加 class 属性

JS判断字符串是否为json字符串

form表单输入框需要进行json校验，确保数据为json字符串，通过使用try/catch和JSON.parse判断是否为json字符串，方法如下：

const isJsonString = str => {
  try {
    const toObj = JSON.parse(str) // json字符串转对象
    /*
        判断条件 1. 排除null可能性 
                 2. 确保数据是对象或数组
    */
    if (toObj && typeof toObj === 'object') { 
      return true
    }
  } catch {}
  return false
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在 antd4 表单中使用上述方法：

const jsonValidate = (_, value) => {
  return new Promise((resolve, reject) => {
    if (value?.trim()) {
      const isJson = isJsonString(value)
      if (isJson) {
        resolve(isJson)
      }
    }
    reject(new Error('请输入正确的json字符串'))
  })
}
  
// 组件中使用`在这里插入代码片` 

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

原文：https://blog.csdn.net/qq_49464155/article/details/126104536

js读取json数据

方法一：函数构造定义法返回

var strJSON = "[{name:'json name'}, {name:'json2'}]";//得到的JSON
var obj = new Function("return" + strJSON)();//转换后的JSON对象
alert(obj[0].name);//json name
1
2
3

方法二：js中著名的eval函数

var strJSON = "[{name:'json name'}, {name:'json2'}]";//得到的JSON
var obj = eval(strJSON);//转换后的JSON对象
alert(obj[0].name);//json name
1
2
3

三 （注意：上面strJSON是字符串，下面是对象）

var jSON = [{name:'json name'}, {name:'json2'}];//得到的JSON
alert(jSON [0]["name"]);//json name
1
2

var jSON = {test: [{name:'json name'}, {name:'json2'}]};//得到的JSON
for(var key in jSON){
	alert(jSON[key] [0]["name"]);//json name
}
1
2
3
4

js获取对象的方法

1. 通过id获取 document.getElementById(‘box1’)
2. 通过类名获取 var boxs = document.getElementsByClassName(‘box’); 得到的结果是一个类数组格式，可以通过下标获取对象boxs[0], 如果下标超过最大长度得到undefined而不会报错。
3. 通过标签名获取var lis = document.getElementsByTagName(‘li’); 得 到的结果是一个类数组格式，可以通过下标获取对象 lis[0], 如果下标超过最大长度得到undefined 而不会报错。如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
4. html5新增的获取对象的方法： 通过选择器获取document.querySelector(".list li") 获取到的是单个元素 默认选择第一个，document.querySelectorAll(".list li") 获取到的是多个元素（数组形式）

var node = document.querySelector("#lover");   // 获取文档中的第一个id=lover的元素
var node = document.querySelector(".lover");   // 获取文档中的第一个class="lover"的元素
var node = document.querySelector("p.lover");  // 获取class=“lover” 的第一个p元素
var node = document.querySelector("a[target]");// 获取第一个带target属性的a元素
var element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
document.querySelector(\"body\").style="";     // 移除style属性 
document.querySelector("h2,h3").style.backgroundColor = "blue";//为文档的第一个h2元素添加背景颜色，但是，如果文档中<h3>元素位于<h2>元素之前，<h3>元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。
原文链接：https://blog.csdn.net/qq_44885775/article/details/124420956
1
2
3
4
5
6
7
8

标签对象的属性：innerHTML innerText outerHTML outerText
	innerHTML 元素中所有的内容（包括标签）
	innerText 元素中所有的内容（不包括标签）
	outerHTML 自身及子元素中所有的内容（包括标签）
	outerText 自身及子元素中所有的内容（不包括标签）
	
样式： 使用 `style` 对象来设置元素的样式属性或者通过添加、移除 CSS 类名称来改变元素的样式。
// 修改元素的样式属性
elementBySelector.style.color = 'red'; 
// 添加CSS类名
elementBySelector.classList.add('newClass');

属性：使用 `setAttribute()` 方法来设置元素的属性。使用直接赋值的方式来修改某些特殊属性，如 `value`、`checked` 等。
// 设置元素的属性
elementById.setAttribute('src', 'image.jpg'); 
// 直接赋值修改特殊属性
inputElement.value = '新值';

自定义属性：
var myname = document.createAttribute("myname");
myname.nodeValue = "democlass";
elementById.attributes.setNamedItemm(myname);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

如何使用 JavaScript 为元素添加 class 属性？

1、使用 className 属性
className 属性可以用来获取或设置元素的 class 属性值。可以使用以下语法来为元素添加 class 属性：

element.className = "class1 class2 class3";
1

其中，element 是要添加 class 属性的 HTML 元素，class1，class2，class3 是要添加的 class 属性值。如果要添加多个 class 属性值，可以使用空格分隔。

2、使用 setAttribute() 方法
setAttribute() 方法可以用来为元素添加属性。可以使用以下语法来为元素添加 class 属性：

element.setAttribute("class", "class1 class2 class3");
1

其中，element 是要添加 class 属性的 HTML 元素，class1，class2，class3 是要添加的 class 属性值。如果要添加多个 class 属性值，可以使用空格分隔。

3、使用 classList 属性
classList 属性可以用来获取元素的 class 属性值，也可以用来添加、删除和切换 class 属性值。可以使用以下语法来为元素添加 class 属性：

element.classList.add("class1", "class2", "class3");
1

其中，element 是要添加 class 属性的 HTML 元素，class1，class2，class3 是要添加的 class 属性值。如果要添加多个 class 属性值，可以使用逗号分隔。

4、使用 toggle() 方法
toggle() 方法可以用来切换 class 属性值，如果指定的 class 属性值不存在，则添加；如果存在，则删除。可以使用以下语法来为元素添加 class 属性：

element.classList.toggle("class1");
1

其中，element 是要添加 class 属性的 HTML 元素，class1 是要添加的 class 属性值。

5、使用 contains() 方法
contains() 方法可以用来检查元素是否包含指定的 class 属性值。可以使用以下语法来检查元素是否包含指定的 class 属性值：

element.classList.contains("class1");
1

其中，element 是要检查的 HTML 元素，class1 是要检查的 class 属性值。如果元素包含指定的 class 属性值，则返回 true；如果不包含，则返回 false。

原文：https://www.861ppt.com/news/28683.html

循环

for (var i=0;i<cars.length;i++)
{ document.write(cars[i] + "
"); }
1
2

var person={fname:"Bill",lname:"Gates",age:56};  
for (x in person)  // x 为属性名
{ txt = txt + person[x]; }
1
2
3

while (i<5)
{ x=x + "The number is " + i + "
";
  i++;
}
1
2
3
4

do
{   x=x + "The number is " + i + "
";
    i++;
}
while (i<5);
1
2
3
4
5

js获取表格的行数和列数的方法

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="example_table"> 
			...
	<tbody id="example_tbody">
	  <tr> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	  tr> 
	  <tr> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	  tr> 
	  <tr> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	    <td> td> 
	  tr> 
	tbody>
table> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

则获取该表格的行数和列数可分别如下代码：

//表格行数 
var rows = document.getElementById("example_table").rows.length; 
//表格体行数 
var rows = document.getElementById("example_tbody").rows.length; 
//表格列数 
var cells = document.getElementById("example_table").rows.item(0).cells.length; 
1
2
3
4
5
6