javascript - DOM对象控制HTML元素详解

时间:2022-02-23 20:19:49

1.方法

 

getElementsByName() -- 获取name
getElementByTagName() -- 获取 
getAttribute()         --获取元素属性
setAttribute()         --设置元素属性
childNodes()            --访问子节点
parentNodes()        --访问父节点
createElement()    --创建元素节点
createTextNode    --创建文本节点
insertBefore()        --插入节点
removeChild()        --删除节点
offsetHeight        --返回,任何一个元素的高度包括边框和填充,但不是边距
scrollHeight        --返回整个元素的高度(包括带滚动条的隐蔽的地方)

javascript - DOM对象控制HTML元素详解getElementsByName() -- 获取name

1
2
3
4
5
6
7
8
9
<script>
        function getName() {
            var count = document.getElementsByName("pn");
            alert(count.length);//count.length = 3
            var p = count[2];
            p.innerHTML = "World";
        }
        getName();
    </script>
 
javascript - DOM对象控制HTML元素详解
getAttribute()         --获取元素属性

1
2
3
4
5
6
<a id="aid" title="得到了a标签的属性"></a>
function getAttr() {
            var anode = document.getElementById("aid");
            var attr = anode.getAttribute("title");
            alert(attr);
        }
 
javascript - DOM对象控制HTML元素详解

childNodes()            --访问子节点
1
2
3
4
5
6
7
8
9
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
function getChildNode() {
            var childnode = document.getElementsByTagName("ul")[0].childNodes;
            alert("length:" + childnode.length + ",nodeName:" + childnode[0].nodeName);
        }
 
javascript - DOM对象控制HTML元素详解javascript - DOM对象控制HTML元素详解

createElement()    --创建元素节点

1
2
3
4
5
6
7
8
function createNode() {
           var body = document.body;
           var input = document.createElement("input");
           input.setAttribute("value", "按钮");
           input.setAttribute("type", "button");
           body.appendChild(input);
       }
       createNode();

javascript - DOM对象控制HTML元素详解

insertBefore()        --插入节点

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="div">
        <p id="pid">这个第1个位置</p>
    </div>
   <script type="text/javascript">
       function addNode() {
           var div = document.getElementById("div");
           var pid = document.getElementById("pid");
           var newnode = document.createElement("p");
           newnode.innerHTML = "这个新增加的P";
           div.insertBefore(newnode, pid);
       }
       addNode();
   </script>