vnsc威尼斯城官方网站:JavaScript 学习笔记(十二) dom

Dom
createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment()
//创建新节点
function CreatNode() {
var oP = document.createElement(“p”);
oP.innerHTML = “<font style=’color:red;’>Hello
World!</font>”;
document.body.appendChild(oP);
}

window,所有全局变量都是它的属性,所有全局的函数都是它的函数。

var age = 18;
console.log(age);
console.log(window.age + '------');
function sum(){
  var age = 18;
  console.log(age);
}
sum();
window.sum();

console.log('000000');
window.console.log('111111');
一、简介

        我在简书的第一篇文章,就用阮大神的“JavaScript
标准参考教程(alpha)”来开始吧!

//删除节点
function RemoveNode() {
var oP = document.getElementsByTagName(“p”);
var len = oP.length;
if (len != 0) {
oP[len – 1].parentNode.removeChild(oP[len – 1]);
//这里最好使用节点的parentNode特性来删除
}
else {
alert(“已经全部删除!”);
}
}
//替换节点
function ReplaceNode() {
var oNewP = document.createElement(“p”);
oNewP.innerHTML = “<font style=’color:red;’>New –> Hello
World!</font>”;
//将最后一个新增的节点替换成oNewP
var len = document.getElementsByTagName(“p”).length;
var oOldLastP = document.getElementsByTagName(“p”)[len – 1];
oOldLastP.parentNode.replaceChild(oNewP, oOldLastP);
}
//insertBefore()方法
让新消息出现在旧消息之前,接受两个参数:
1.要添加的节点;2.插在哪个节点之前
xxx.parentNode.insertBefore(newChild, oldChild);
//createDocumentFragment()方法
创建文档碎片
可以把一些创建的十个新的节点元素都添加到文档碎片中,然后这个碎片作为参数传递给要添加碎片的appendChild()
xxx.appendChild(oFragment);
这样xxx只调用了一次来代替调用十次,提高性能。

动态跳转

window.location.href = 'http://www.baidu.com';
location.href = 'http://www.520it.com';

文档对象模型(Document Object
Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM编程:
DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。通过 HTML
DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML
元素(节点)均可被修改,也可以创建或删除节点

引用书中的话,

document,动态获取网页中的所有的节点,可以动态的对节点进行增删改查。

document.write('hello world');
document.write('<button>百度一下</button>');
document.write('img src="https:www.baidu.com/img/bg_logo1.png" width="200">'); 

动态修改图片
<script>
getElementById id名
getElementsByClassName className
getElementsByName 根据标签的内部属性name
getElementsByTagName 
function change(){
   var img = document.getElementsByName('test2')[0];
   img.src = 'img/img_02.jpg';
}
</script>
<body>
![](img/img_01.jpg)
<p></p>
<button onclick = "change();">改变图片</button>
<div class="test1"></div>
</body> 

动态切换图片
<body>
<img src = 'img/img_01.jpg'>
<p></p>
<button name="btns">切换图片</button>
<script>
var img = document.getElementsByTagName('img')[0];
var btn = document.getElementsByName('btns')[0];
btn.onclick = function(){
   //lastIndexOf('img_01.jpg')如果有,任一正数,如果没有,返回-1
   if(img.src.lastIndexOf('img_01.jpg') != -1){
         img.src = 'img/img_02.jpg';   
   }
   else{
   img.src = 'img/img_01.jpg';
   }
} 
</script>
</body>

鼠标移动
<body>
<img src = 'img/img_01.jpg'>
<input>
<script>
var img = document.getElementsByTagName('img')[0];
img.onmousemove = function(){
     console.log(‘在图片上移动’);
}
img.onmouseover = function(){
     console.log('进入图片');
}
img.onmouseout = function(){
     console.log('移出图片');
}
var input = document.getElementsByTagName('input')[0];
input.onfocus = function(){
    input.style.outline = 'none';
    input.style.width = '300px';
    input.style.heigtht = '400px';    
}
input.onselect = function(){
   alert(input.value);
}
</script>
</body>

显示隐藏图片交替
<body>
<img id = 'icon' src = 'img/img_01.jpg'>
<p id = 'word'>helloworld!</p>
<button id = 'btn'>隐藏</button>
<script>
var img = document.getElementById('icon');
var p = document.getElementById('word');
var btn = documentlgetElementById('btn');
btn.onclick = function(){
   if(btn.innerHTML == '隐藏'){
      btn.innerHTML = '显示';
      img.style.display = ‘none’;
      p.style.display = 'none';
   }else
   {
   btn.innerHTML = '隐藏';
   img.style.display = 'inline-block';
   p.style.display = 'block';
   }
}
</script>
</body>

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object
Model):

      本书全面介绍 JavaScript
核心语法,从最简单的开始讲起,循序渐进、由浅入深,力求清晰易懂。所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。

     
本书适合初学者当作JavaScript语言的入门教程,也适合当作日常使用的参考手册。

vnsc威尼斯城官方网站 1

         对于初中级前端工程师,学习此教程,并结合经典的《 JavaScript 
高级程序设计(第3版)》,相信会有不错的效果!

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

 JavaScript
高级程序设计(第3版).pdf 
密码: 7twi

来自《JavaScript
标准参考教程(alpha)》,by
阮一峰

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应
二、DOM选择器(查找元素)

 DOM选择器可分为:

  • 直接选择器
  • 间接选择器

直接选择器

1.domcument.getElementById()

  参数为id名,通过获取标签的id直接获取到标签对象,不存在则返回null

2.domcument.getElementsByClassName()

  参数为class名,返回所有为该class名的标签集合

3.domcument.getElementsByTagName()

  参数为标签名,返回所有该标签名的数组。

4.domcument.getElementsByName()

  参数为name属性,返回所有name属性名所在标签数组

间接选择器

如果我们把html文档对象中的每一个标签看作是一个节点,那么就节点关系可分为:父节点、子节点、兄弟节点,每个节点常用属性有:nodeName(节点名)、nodeType(节点类型)、nodeValue(节点值)。

nodeName

nodeName 属性含有某个节点的名称。

* 元素节点的 nodeName 是标签名称
* 属性节点的 nodeName 是属性名称
* 文本节点的 nodeName 永远是 #text
* 文档节点的 nodeName 永远是 #document

注释:nodeName 所包含的 XML 元素的标签名称永远是大写的.

nodeValue

对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的,可使用innerHtml或者innerText代替

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是:
元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

<body>
<input id="a1" value="hehe" >这里是一个input</input>
<script>
 var tag=document.getElementById('a1');
    document.write('节点名字:'+tag.nodeName)//节点名
    document.write('节点类型:'+tag.nodeType)//节点类型为1
    document.write('节点值:'+tag.nodeValue)//节点值null,类型为1是元素类型,value不可用
</script>
</body>

间接选择器主要方法:

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

 

三、操作元素

class整体样式操作

1、className

通过obj.className=”c1″可设置标签的整体样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: aqua;
        }
        .c2{ background-color: red;

        }
    </style>
</head>
<body>
<div id="a1" onclick="show();" class="c1">来了</div>
<script>
    function show() {
         var tag=document.getElementById('a1');
         tag.className='c2';//设置整体样式为c2
    }
</script>
</body>

2、classList

当标签的class属性有多个时候,obj.classList为返回标签的class数组,通过obj.classList.add()、obj.classList.remove()设置样式,还有length等方法。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: aqua;
        }
        .c2{ border: 1px solid darkgreen;

        }
    </style>
</head>
<body>
<div id="a1" onclick="show();">来了</div>
<script>
    function show() {
         var tag=document.getElementById('a1');
         tag.classList.add('c1','c2');//添加样式
        // tag.classList.remove('c1','c2');//移除样式
    }
</script>
</body>

 内容文本操作

1、innerText

获取标签中所有文本内容

<body>
<div id="a1">
    搜狗
    <a>百度</a>
</div>
<script>
    var tag=document.getElementById('a1');
    console.log(tag.innerText)//输出文本内容为“搜狗 百度”
    tag.innerText="你好 wd"//设置文本内容
</script>
</body>

2、innerHTML

获取标签内的全部内容包括标签,可设置标签

<body>
<div id="a1">
    搜狗
    <a>百度</a>wd
</div>
<script>
    var tag=document.getElementById('a1');
    console.log(tag.innerHTML)//输出"搜狗<a>百度</a>wd"
    tag.innerHTML="<a href='www.baidu.com'>百度</a> "//设置标签中内容为a标签
</script>
</body>

3、value

获取和设置value属性值,对于input、select、textarea等系列生效,特别的select标签具有selectIndex属性也可设置value值。

<body>
<input id="a1" type="text" value="点我" onclick="func();">
<script>
    function func() {
        var tag=document.getElementById('a1');
        tag.value='随便';
    }

</script>
</body>

<body>
<select id="b1">
    <option id="a1">北京</option>
    <option id="a2">上海</option>
    <option id="a3">广州</option>
</select>
<script>
    var tag=document.getElementById('b1')
    console.log(tag.selectedIndex)
    tag.selectedIndex='1'//根据index设置select标签选择项

</script>
</body>

 应用场景:搜索框示例

<body>
<div>
    <input id="a1" type="text" onblur="moveOut()" value="请输入关键字" style="color: #dddddd" onfocus="Func();">

</div>
    <script>
        function Func() {
            var tag=document.getElementById("a1")
            if (tag.value=="请输入关键字"){
                tag.value="";
        }
        }
        function moveOut() {
            var tag=document.getElementById("a1")
            if (tag.value.length=="")
                tag.value="请输入关键字";
        }
         //oblur是光标移出事件   onfocus光标获取事件
    </script>
</body>

属性操作

  1. attributes:获取标签全部属性

  2. setAttribute(key,value):设置标签属性

  3. getAttribute(key):获取某个标签属性

  4. removeAttribute(key):移除标签的某个属性

 

创建标签

 方式一:通过标签字符串创建

<body>
<div id="a1">
</div>
</body>
<script>
    var tag="<a href='www.baidu.com'>百度</a>";//创建标签字符串
    document.getElementById("a1").insertAdjacentHTML("beforeEnd",tag);//添加标签到html中
</script>

方式二:通过document.createElement(‘标签名’)方法创建

<body>
<div id="a1">
</div>
</body>
<script>
    var tag=document.createElement('input');//创建标签
    tag.setAttribute('type','text');//设置属性
    tag.style.color='red';//设置样式
    var p=document.createElement('p');//创建P标签
    p.appendChild(tag);//将input标签包裹在p标签之中
    document.getElementById('a1').appendChild(p)//添加p标签到html中
</script>

添加标签到html中方法

1.obj.insertAdjacentHTML(position,htmlcontext)

参数position共四个,htmlcontext为字符串形式的html

tps:’beforeBegin(找到的标签开始之上)’、
‘afterBegin(找到的标签开始之下)’、 ‘beforeEnd(找到标签的结束之前)’、
‘afterEnd(找到的标签的结束之后)’

2.obj.appendChild(newchild)

添加obj的子标签,参数为标签对象。

 

四、提交表单

1.form action方式提交表单

<body>
<form action="http://www.baidu.com" method="get">
    <input type="text">
    <input type="submit" value="提交">
</form>
</body>

2.js方式提交,可以是任意标签

<body>
<form id="a1"  action="http://www.baidu.com" method="get">
    <input type="text">
</form>
<a onclick="subData();">点我提交</a>
<script>
    function subData() {
        document.getElementById('a1').submit()//获取到form标签再提交
    }
</script>
</body>

 

五、dom事件绑定

 

Event 对象

Event
对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML
事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段
JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。

 

vnsc威尼斯城官方网站 2

 

dom事件绑定

dom绑定事件方式:

dom0:通过html标签绑定事件

示例:

<div id="a1" onmouseover="AddColor();"> 你好</div>
<script>
function AddColor() {
    var tag=document.getElementById('a1');
    tag.style.color="red";
}
</script>

 dom1:在javascript代码中进行绑定

语法为:
elementObject.onXXX=function(){
    // 事件处理代码
}

 示例:

<body>
<div id="a1"> 你好</div>
<script>
    var tag=document.getElementById('a1');
    tag.onclick=function () {
        this.style.color='red';
        console.log('11');
    }
</script>
</body>

 利用监听函数绑(addEventListener() 或 attachEvent())定事件

addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);

 

参数 说明
elementObject DOM对象(即DOM元素)。
eventName 事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。
handle 事件句柄函数,即用来处理事件的函数。
useCapture 事件捕获模型,Boolean类型(true/flase),是否使用捕获,一般用flase ,false表示冒泡方式(从html文档内部向外部进行绑定),ture表示是捕捉模式,从html文档外部向内部进行绑定。

 

 

attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);

参数 说明
elementObject DOM对象(即DOM元素)。
eventName 事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
handle 事件句柄函数,即用来处理事件的函数。

 示例一 使用匿名函数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="a1"> 你好</div>
<script>
    var tag=document.getElementById('a1');
    tag.addEventListener('click',function () {
        this.style.color='red';
    },false)//绑定一个事件
    tag.addEventListener('mouseout',function () {
        this.style.color='blue';
    },false)//绑定第二个事件
</script>
</body>
</html>

 示例二 不使用匿名函数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="a1"> 你好</div>
<script>
    function add() {
        this.style.color='red';
    }
    var tag=document.getElementById('a1');
    tag.addEventListener('click',add,false)
</script>
</body>
</html>

 

其他
1.console.log():控制台输出

<script>
    console.log("欢迎投简历至XXXX")
</script>

2.alert():弹窗

<script>
    alert('123')
</script>

3.confirm(提示内容):确认框

<script>
    var a=confirm('确认选中?')//a获取返回值,返回值为true/false
    console.log(a)
</script>

4.location.href:获取或设置当前的url

<script>
    var a=confirm('确认跳转到百度?');
    if (a){
        location.href="http://www.baidu.com";//设置当前url相当于重定向
    }
</script>

5.location.reload:刷新页面等价于(location.href=location.href)

6.定时器

  • setInterval(function,times) :设置定时器,每多少秒执行
  • clearInterval(obj) :取消定时器
  • setTimeout(function,times):单次定时器,用完与setInterval完全一样,可用于消息提示,过会消失。
  • clearTimeout(obj):清除单次定时器

 

相关文章