master

分支 (1)

管理

管理

master

lnmpbroter
/
65.测试js控制dom对象，也就是获取html元素及其属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试js控制dom对象，也就是获取html元素及其属性</h1>
<hr>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<a href="#" id="aid">百度</a>
<ul id="ulid"><li>a</li><li>b</li><li>c</li></ul>

<script>
    var yuansu=document.getElementsByTagName("p");//p是元素名，还有用那么获得元素的方式是getElementsByName
    alert(yuansu.length);//用name可以获得到多个元素，这里的到的结果是4
    yuansu[2].innerHTML="world";//既然结果是多个元素，那么就可以用数组的方式获取一个元素，为这个元素
    var anode=document.getElementById("aid");
    var aattr=anode.getAttribute("id");//获得元素的一个属性
    alert(aattr);
    anode.setAttribute("id","bid");//设置一个属性的值 setAttribute("id","bid")
    var aattr2=anode.getAttribute("id");
    alert(aattr2);
    var childnodes=document.getElementById("ulid").childNodes;//子节点 childNodes
    alert(childnodes.length);
    alert(childnodes[2].nodeType);
    var parent=childnodes[2].parentNode;//父节点 parentNode
    alert(parent.nodeName);
    var addNode=document.createElement("input");//创造节点
    addNode.type="submit";
    addNode.value="提交";
    parent.append(addNode);                    //添加节点
    var insertNode=document.createElement("img"); //创造节点
    insertNode.src="./草原1.jpg";
    demoNode=(parent.childNodes)[3];             //选择要插入的位置节点
    parent.insertBefore(insertNode,demoNode);    //把新节点插入特定位置
    parent.removeChild(parent.childNodes[4]);    //删除节点
    var scrollWidth=document.documentElement.offsetWidth||document.body.offsetWidth;    //获取窗口的宽度
    var scrollHeigth=document.documentElement.offsetHeight||document.body.offsetHeight; //获取窗口的宽度
    alert(scrollWidth+"*"+scrollHeigth);
</script>
########################################################

</body>
</html>