JavaScript Dom入门

好像代码太杂了,博客园里跑不起来,单独复制到html中本地测试都是没有问题的.

JavaScript

JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript 被设计为向 HTML 页面增加交互性。
许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。

中文文档: 点击

书写规范

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
 
<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

HTML DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
中文文档: 点击

选择器

类似于CSS选择器,获取的为列表

document.getElementById('id'); 				通过标签的ID查找
document.getElementByClassName('class');	通过标签的class查找()
document.getElementsByName('name');			通过标签的name属性查找(某些标签才可以使用)
document.getElementsByTagName('tagname');	通过标签的标签名称查找

---

事件

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick=JavaScript

<h5 onclick="this.innerHTML='hello!'">请点击这段文本!</h5> 

请点击这段文本!

事件列表:

---

改造默认标签

html中一些标签有绑定一些默认事件,可以通过下面方式改造

<a href="www.cnblogs.com" onclick="return Changetags();">本来应该跳转</a>
<script type="text/javascript">
	function Changetags(){
		alert('修改')
		return false   //改造后事件是按照自定义默认顺序执行,返回false就不会执行默认事件
	}
</script>

本来应该跳转

---

增加html标签

<div id="container"></div>
<p onclick="Addtags();">添加</p>
<script type="text/javascript">
    function Addtags() {
        //生成一个a标签对象,并设置属性
        var createtags = document.createElement('a');
        createtags.innerText = '添加红字链接'
        createtags.style.color = 'red'
        createtags.href = 'http://www.cnblogs.com';
        //将对象加到container中
        var nid = document.getElementById('container')
        nid.appendChild(createtags)
        return false;
    }
</script>

添加

---

修改标签属性

<div id="dtest" style=" 80px;font-size: 40px" >修改属性</div>

<script type="text/javascript">
    var nid = document.getElementById("dtest");
    nid.setAttribute('name','777');
    nid.setAttribute('value','777');
    nid.className = 'dtest'
    nid.style.color = 'white';
    nid.style.backgroundColor = 'red'
    nid.style.height = '100px';
    nid.style.backgroundSize = '100px';
    nid.style.fontSize = '12px';
    console.log(nid)
</script>

修改属性

---

内容获取和修改

innerText代表文本
innerHTML代表html

var obj = document.getElementById('nid')
obj.innerText                       # 获取文本内容
obj.innerText = "hello"             # 设置文本内容
obj.innerHTML                       # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容

• 通过id,class,标签获取和修改

<p id="test1">test</p>
<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>
<div class="test-class">test-class1</div>
<div class="test-class">test-class2</div>
<script type="text/javascript">
    var nid = document.getElementById('test1');
    console.log(nid.innerText);
    nid.innerText = '根据id修改里文本内容';
    var tags = document.getElementsByTagName('li'); //获取到文本列表
    for(var i=0; i<tags.length; i++ ){
        var item = tags[i];                         //遍历取得每一个元素
        console.log(item.innerText);                //在终端打印文本
        item.innerText = '修改li标签文本内容';       //修改页面内容
    }
    var tc = document.getElementsByClassName('test-class');
    for(var i=0; i<tc.length; i++){
        var item1 = tc[i];
        console.log(item1.innerText);
        item1.innerText = '根据class修改里文本内容';
    }
</script>

---

• 通过name获取特殊标签输入的值:input

<form>
    <p><input name="username" type="text" value="default" /></p>
    <p><input name="pwd" type="password" value="123456" /></p>
</form>
<script type="text/javascript">
    var uname = document.getElementsByName('username')[0];
    var passwd = document.getElementsByName('pwd')[0];
    console.log(uname.innerText, passwd.innerText, uname.value, passwd.value);
</script>

<h3><input type="button" onclick="GetValue();" value="点击"/>触发获取输入内容</h3>
<input id="i1" type="text" />
<script type="text/javascript">
    function GetValue() {
        var obj = document.getElementById('i1')
        alert(obj.value)
        obj.value = ''
    }
</script>

触发获取输入内容

---

• innerHTML:上面两种都只能获取标签内的文本,innerHTML可以获取html源码,包括特殊符号

<div id="d1">
    div框       空格
    <h5>h5标签</h5>
</div>
<script type="text/javascript">
    var nid = document.getElementById('d1');
    console.log(nid.innerText)
    console.log(nid.innerHTML)
</script>

---

• select,textarea获取选中或者输入

<h3><input type="button" onclick="GetValue();" value="点击"/>触发获取输入内容</h3>
<textarea id="ta1">将getvalue函数getid改为ta1</textarea>
<select id="s1">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

<script type="text/javascript">
    function GetValue() {
        var obj = document.getElementById('s1')
        alert(obj.value)
        obj.value = '2'
    }
</script>

触发获取输入内容

将getvalue函数getid改为ta1

北京
上海
广州

---

其他功能

1. console.log(): 在客户端console打印
2. alert(): 在客户端弹出窗口
3. confirm(): 类似alert也弹出窗口并给返回值

<input type="button" value="鼠标指到" onmouseover="MyConfirm();"/>
<script type="application/javascript">
    function MyConfirm() {
        var ret = confirm('confirm');
        console.log(ret)
    }
</script>

4.url跳转和刷新
location.href和location.reload,还没弄明白过两天再研究

5.定时器

setInterval('alert()', 2000): 循环执行
clearInterval(obj): 停止
setTimeout('alert()', 2000): 只在指定时间执行一次
clearTImeout(): 停止

<div>
    <p id="pmd">这是一个跑马灯!</p>
    <input type="button" value="停止跑马灯" onclick="stopPmd();"/>
</div>
<script type='text/javascript'>
    stopobj = setInterval('Go()',1000);
    function stopPmd() {
        clearInterval(stopobj)
    }
    function Go(){
        /* title的跑马灯
        var content = document.title;
        var firstChar = content.charAt(0);
        var sub = content.substring(1,content.length);
        document.title = sub + firstChar;
         */
        var content = document.getElementById('pmd').innerText;
        var firstChar = content[0];
        var sub = content.substring(1,content.length);
        document.getElementById('pmd').innerText = sub + firstChar;
    }
</script>

<p id="pmd">这是一个跑马灯!</p>
<input type="button" value="停止跑马灯" onclick="stopPmd();"/>