1.DOM
全称是文档对象模型,是js提供的一种用来快速解析HTML网页的技术
利用Document对象提供的API操作元素
常用方法:
- getElementById(id属性的值) – 通过id属性的值获取元素(只能获取一个)
- getElementByName(name属性的值) – 通过name属性的值获取元素(获取到多个,存入数组)
- getElementByClassName(class属性的值) – 通过class属性的值获取元素(获取到多个,存入数组)
- getElementByTagName(标签名的值) – 通过标签名获取元素(获取到多个,存入数组) write(数据) –
- 向网页输出指定的数据
- innerHTML – 设置或返回元素的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 DOM技术</title>
<script>
function fun(){
var a=document.getElementById("d");
console.log(a);
a.innerHTML="你好,div1";
console.log(a.innerHTML);
}
function fun2(){
var a=document.getElementsByName("b");
console.log(a[2]);
console.log(a[2].innerHTML);
}
function fun3(){
document.getElementsByName("b")[2].innerText="<h1>我变了</h1>";
document.getElementsByClassName("a")[1].innerHTML="<h1>你好,div3</h1>"
document.getElementsByClassName("a")[1].style.color="blue";
document.getElementsByClassName("a")[1].style.fontFamily="微软雅黑";
document.getElementsByTagNameNS("div")[2].style.color="red";
}
</script>
</head>
<body>
<div id="d" onclick="fun();">我是div1</div>
<div class="a">我是div2</div>
<div class="a">我是div3</div>
<div name="b">我是div4</div>
<p name="b">我是p1</p>
<p name="b" onclick="fun3();">我是p2</p>
<p name="b">我是p3</p>
<p class="a">我是p4</p>
</body>
</html>
2.JSON
规定了浏览器与服务器交互数据的格式,本质上就是一个字符串
好处:轻量级,简洁明了
- json数据:
var a=’“name”:“john”’ - json对象
var a=’{“name”:“john”,“age”:“12”}’ - json数组
var a=’[{“name”:“john”,“age”:“12”},{“name”:“lili”,“age”:“11”}]’
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json的测试</title>
</head>
<script>
var a ='"name":"xiaobai"';
var b='{"name":"xiaobai","age":"20"}';
var c='[{"name":"rose","age":"12"},{"name":"anli","age":"10"}]';
console.log(a.length);
console.log(b.concat("123"));
var jsonchuan='{"name":"jack",age":20}';
var jschuan={name:"tony",age:20}
console.log(JSON.parse(b));
console.log(JSON.parse(b).name);
console.log(JSON.parse(b).age);
var car={name:"小鹿",price:1212};
console.log(JSON.stringify(car));
console.log(JSON.stringify(car).length);
console.log(JSON.stringify(car).concat("1212"));
var a=JSON.parse(c);
console.log(a[0].name);
console.log(a[1].age);
</script>
<body>
</body>
</html>
|