javascript DOM基础内容/操作步骤

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

通常通过js可以对html元素进行操作,首先就要先找到这个元素;

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

 

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

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

 


 

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


document操作:

1、找元素 get Element、、、
2、操作内容 innerHtml  

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

  表单元素内容属性:. value

  元素的链接:.href   网页跳转形式:.target~~

  图片地址.src   

<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>
链接和跳转栗子

3、操作属性:

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

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

  删除removeAttribute(“属性名”)

 

 4、作用样式 :

  元素.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>
作用样式栗子

 

5、操作元素(创建标签,删除标签)

 

创建元素 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():在指定的毫秒数后调用函数或计算表达式。

 

posted @ 2017-10-16 14:51  沃泽法克  阅读(298)  评论(0编辑  收藏  举报