JavaScript的DOM对象控制HTML元素

方法名称包括:
getElementsByName() – 获取name
getElementsByTagName() – 获取元素
getAttribute – 获取元素属性
setAttribute – 设置元素属性
childNodes – 访问子节点
parentNode – 访问父节点
creatElement – 创建元素节点
creatTextNode – 创建文本节点
insertBefore – 插入节点
removeChild – 删除节点
offsetHeight – 网页尺寸 (ffsetHeight:内容高度+padding高度+边框宽度)
scrollHeight – 网页尺寸(不包含导航条,实际内容+padding,scrollHeight = topPadding + bottomPadding + 内容margix box的高度。

clientHeight – 网页尺寸(不包含导航条,包含padding,计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
offsetHeight)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-JS</title>
</head>
<body>

    <p name = "pn">Hello</p>
    <p name = "pn">Hello</p>
    <p name = "pn">Hello</p>
    <p name = "pn">Hello</p>

    <a id = "aid" title = "得到了A标签的属性">hello</a>
    <a id = "aid2">aid2</a>

    <ul><li>1</li><li>2</li><li>3</li></ul>

    <div id="div">
        <p id = "pid">div的P元素</p>
    </div>

    <script> // 添加修改元素属性 function getName(){ var count = document.getElementsByName("pn"); // var count = document.getElementsByTagName("p"); 这一种方式和上面的效果一样,只是一个通过name属性,一个通过本身的name // 如果如上方一样一个name同时有多个P标签,那么会以集合的形式排列,此时count.length打印的4; // 而如果使用的是getElementByID,则不会出现多个重名的现象; alert(count.length); /* 扩展: 说明:getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。 比如:var x=document.getElementsByTagName("input");//<input name="myInput" type="text" size="20" /> */ var p = count[0]; p.innerHTML = "world"; // 将第一个元素修改为 "world"; 同理,也可以修改其他元素; } // getName(); // 访问元素属性 function getAttr(){ var anode = document.getElementById("aid"); var attr = anode.getAttribute("id"); alert(attr); } // getAttr(); // 设置元素属性 function setAttr(){ var anode = document.getElementById("aid2"); anode.setAttribute("title","动态设置A的title属性"); var attr = anode.getAttribute("title"); alert(attr); } // setAttr(); // 得到子节点 function getChildNode(){ var childNode = document.getElementsByTagName("ul")[0].childNodes; alert(childNode.length); alert(childNode[0].nodeType); // 获得子节点的类型 } // getChildNode(); // 此时打印的是 7 ,原因:ul标签和li标签之后都默认存在一个空格,如果在<>之后不换行,而是挨着写,就会是3(就像上面的); // 得到父节点 function getParentNode(){ var div = document.getElementById("pid"); alert(div.parentNode.nodeName); } // getParentNode(); // 创建节点(插入节点) function createNode(){ var body = document.body; var input = document.createElement("input"); // creatTextNode 插入文本节点, input.type = "button"; input.value = "按钮"; body.appendChild(input); // 往末尾插入节点 } // createNode(); // 往DIV中添加一个节点,让其显示在P标签的前面 function addNode(){ var div = document.getElementById("div"); var node = document.getElementById("pid"); // 此处是打算把这个节点插入到P标签的前面,因此需要获得P标签的ID; var newnode = document.createElement("p"); newnode.innerHTML = "动态添加第一个P元素"; div.insertBefore(newnode,node); } // addNode(); // 删除节点 function removeNode(){ var div = document.getElementById("div"); var p = div.removeChild(div.childNodes[0]); // 如果div标签中含有多个子节点,那么需要他们是以数组的形式保存,在删除的时候需要考虑位置; } // removeNode(); // 获得网页的尺寸 function getSize(){ var width = document.body.offsetWidth; // 也可以写成document.documentElement.offsetWidth var height = document.body.offsetHeight; alert(width +","+height); } getSize(); </script>



</body>
</html>

你可能感兴趣的:(JavaScript,html,dom)