javascript DOM基础内容/操做步骤

时间 2019-11-29

标签 javascript dom 基础内容步骤栏目 JavaScript 繁體版

原文原文链接

Document 对象是 Window 对象的一部分，可经过 window.document 属性对其进行访问

一般经过js能够对html元素进行操做，首先就要先找到这个元素；javascript

经过使用 getElementById("id") 方法　　//id标签只有一个
经过使用 getElementsByTagName(" ") 方法　　 //根据标签名找，找到的是数组
经过使用 getElementsByClassName(" ") 方法 // 根据classname，找到的数组
经过使用 getElementsByName(" ") 方法 // 根据name找，找打的是数组 zhu:括号内加引号

Window 对象属性和属性 http://www.runoob.com/jsref/obj-window.htmlhtml

http://www.w3school.com.cn/example/hdom_examples.aspjava

<body onload="函数()"> 在body加载完再调用这个函数node

document操做：数组

一、找元素 get Element、、、
二、操做内容 innerHtml　　app

　　非元素内容属性：. innerHTML 设置或返回元素的内容 //例：documentGetmentById("id").innerHTML （元素内的内容是：）=" "dom

　　表单元素内容属性：. valueide

　　元素的连接：.href 网页跳转形式：.target~~函数

　　图片地址.src this

<script>
function changeLink(){
    document.getElementById('myAnchor').innerHTML="金百度";
    document.getElementById('myAnchor').href="http://www.baidu·com";
    document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
 
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="修改连接">
 
</body>

连接和跳转栗子

三、操做属性：

　　设置setAttribute(“属性”，“属性值”)

　　获得 getAttribute(“属性名”) --返回属性值

　　删除removeAttribute(“属性名”)

四、做用样式：

　　元素.style.样式 = "";

<script type="text/javascript">
function on(obj){
        obj.style.height = '200px';
        obj.style.width = "200px";
    }
    </script>    
    >
</head>
<body>
<div id="qq" style="width: 100px; height: 100px; background-color: red;" onClick="on(this)"></div>

做用样式栗子

五、操做元素（建立标签，删除标签）

建立元素 document.createElement("标签名")
追加元素父元素.appendChild("子元素对象")
删除元素元素对象.remove()

插入元素父元素.insertBefore("子元素"，“在谁以前”)、、跟数组和用，实现插入位置的控制

　　var lii = document.getElementById("id")

　　ul(父元素).insertBefore(lii,id[0]) // 把新的li插入到ul的最前面

document.createTextNode("这是新段落。"

节点

var b = a.nextSibling，找a的下一个同辈元素，注意包含空格；

var b = a.previousSibling，找a的上一个同辈元素，注意包含空格；

var b = a.parentNode，找a的上一级父级元素；

var b = a.childNodes，找出来的是数组，找a的下一级子元素；

var b = a.firstChild，第一个子元素，lastChild最后一个，childNodes[n]找第几个；

alert(nodes[i] instanceof Text); 判断是否是文本，是返回true，不是返回flase，用if判断它的值是否是flase，能够去除空格。

时间控制：

setInterval( 函数，时间)：按照指定的周期（以毫秒计）来调用函数或计算表达式。

setTimeout()：在指定的毫秒数后调用函数或计算表达式。