JavaScript Dom入门

2022-12-24 07:52:48

好像代码太杂了,博客园里跑不起来,单独复制到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="width: 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

北京

上海

广州

其他功能

console.log(): 在客户端console打印
alert(): 在客户端弹出窗口
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();"/>

DOM小例

数字自增按钮

<div>

    <div id="num">1</div>

    <input type="button" value="关注" onclick="Add();" /> //触发一个事件

</div>

<script type="text/javascript">

    function Add(){

        //alert(关注成功); 								//alert在用户页面弹出窗口

        var nid = document.getElementById('num');		//选择

        var text = nid.innerText;						//获取内容和修改

        text = parseInt(text);

        text += 1;

        nid.innerText = text;

    }

</script>

<div id="num">1</div>

<input type="button" value="关注" onclick="Add();" />

搜索框

<input type="text" id="search" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>

<script type="text/javascript">

    function Focus() {

        var nid = document.getElementById('search')

        var value = nid.value;

        if(value == "请输入关键字"){

            nid.value = "";

        }

    }

    function Blur() {

        var nid = document.getElementById('search')

        var value = nid.value;

        if(!value.trim()){

           nid.value = "请输入关键字"

        }

    }

</script>

改造标签提交表单

//改造后任何标签都可以提交

<form id="f1" action="https://www.sogou.com/web" method="get">

    <input name="query" type="text"/>

    //<input type="submit" value="提交" />  //html提交方式

    <div onclick="Submit();">提交</div>

</form>

<script type="text/javascript">

    function Submit() {

        var nid = document.getElementById('f1');

        nid.submit();

    }

</script>

<input name="query" type="text"/>

<div onclick="Submit();">提交</div>

表单检查

<form id="f1" action="https://www.sogou.com/web" method="get">

    <input name="query" type="text"/>

    <input type="submit" value="提交" onclick="return MySubmit();"/>

</form>

<script type="application/javascript">

    function MySubmit() {

        var q = document.getElementsByName('query')[0]; //q 是一个列表

        if(q.value.trim()){   //检查q是否为空

            return true  //检查为真就返回true

        }

        else{

            alert('retry')  //不成功就提醒

            return false

        }

    }

</script>

<input name="query" type="text"/>

<input type="submit" value="提交" onclick="return MySubmit();"/>

jQuery

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。

中文文档: 点击

在实际使用中大多数是使用jQuery或者是bootstrap另外开一篇入门

码农公寓

JavaScript

书写规范

HTML DOM

选择器

事件

请点击这段文本!

改造默认标签

增加html标签

修改标签属性

内容获取和修改

触发获取输入内容

触发获取输入内容

其他功能

DOM小例

jQuery

相关文章