DOM

Document Object Model（文档对象模型）定义了html和xml的文档标准。

DOM 节点树

<html>

    <head>

        <title>DOM</title>

    </head>

    <body>

        <h1>程序改变世界！</h1>

        <a href="#">Hello world!</p>

    </body>

</html>

事件

文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。

onload事件

页面DOM加载完后触发。

window.onload=function()

{

    alert("加载完毕");

}

onclick事件

单击触发事件。

<script>

var foo = function(){

    alert("点我？");

};

</script>

按钮

<button onclick="foo();">按钮</button>
<script>

var foo = function(){

    alert("点我？");

    return false;

};

</script>

A链接 需要指定返回值，否则会跳转

<a href="http://cnblogs.com" onclick="return foo();"> 博客园 </a>

访问DOM元素

document.getElementById()  根据Id获取节点

<input type="button" value="点击" id="btn"/>

<script>

    window.onload=function()

    {

        var btn = document.getElementById("btn");

        btn.onclick=function(){ //为该元素添加点击事件

            alert("点我？");

        }

    }

</script>

document.getElementsByName() 获取指定名称相同的元素集合

<input type="radio" name="sex" checked> 男

<input type="radio" name="sex"> 女

<script>

var sex = document.getElementsByName("sex");

alert(sex.length);

</script>

document.getElementsByTagName() 获取HTML标签名的元素集合

<a href="http://cnblogs.com/">博客园</a>

<a href="http://cnblogs.com/baidawei/">海盗屋</a>

<script>

var htmlA = document.getElementsByTagName("a");

for(var i = 0;i<htmlA.length;i++){

    htmlA[i].onclick=function(){

        return false; //禁用

    }

}

</script>

分组处理getElementsByTagName

<div id="ok">

<a href="http://cnblogs.com/">博客园</a>

<a href="http://cnblogs.com/baidawei/">海盗屋</a>

</div>

<hr>  <!--以下可用-->

<a href="http://cnblogs.com/">博客园</a>

<a href="http://cnblogs.com/baidawei/">海盗屋</a>

<script>

var htmlA = ok.getElementsByTagName("a"); //注意元素id.getElementsByTagName

for(var i = 0;i<htmlA.length;i++){

    htmlA[i].onclick=function(){

        return false; //禁用

    }

}

</script>

document.getElementsByClassName() 获取指定类名的元素集合

<div class="c">第一个</div>

<div class="c">第二个</div>

</body>

<script>

var node = document.getElementsByClassName("c")[0];

alert(node.innerHTML);

</script>

文档结构

<div id="ok">

    <a href="http://cnblogs.com/">博客园</a>

    <a href="http://cnblogs.com/baidawei/">海盗屋</a>

</div>

<script>

var ok = document.getElementById("ok");

document.write(ok.childNodes.length); //该节点下的所有子节点，包含文本节点 5个

document.write(ok.parentNode.nodeName); //该节点的父节点 body

document.write(ok.firstChild.nodeName); //第一个子节点 text

document.write(ok.lastChild.nodeType); //最后一个子节点 3

document.write(ok.nextSibling.nodeName); //下一个兄弟元素 text

document.write(ok.previoursSibling); //上一个兄弟元素

document.write(ok.nodeType); //1 9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点

document.write(ok.nodeValue); //null text节点的文本内容

document.write(ok.nodeName); //div 元素的标签名

</script>

操作节点属性

<div id="ok">

    <a href="http://cnblogs.com/">博客园</a>

    <a href="http://cnblogs.com/baidawei/">海盗屋</a>

</div>

<script>

    var htmlA = document.getElementsByTagName("a");

    var c = htmlA[0].getAttribute("href"); //获取属性

    document.write(c);

    htmlA[0].setAttribute("href","http://www.baidu.com/"); //设置属性

</script>

操作样式

<p>一段测试文字</p>

<script>

    //设置样式

    var p = document.getElementsByTagName("p")[0];

    p.style.color = 'red';

    p.style.display = 'inline';

    p.style.borderTop = "solid"; //所有css样式border-top 去掉-改大写

</script>

创建节点

document.createElement() 创建元素节点

<div id="container">

</div>

<script>

    //创建节点

    var container = document.getElementById("container");

    //创建元素节点

    var span = document.createElement("span");

    //设置文本带html innerText不带html

    span.innerHTML = "<h1>追加的span</h1>";

    //添加属性

    span.setAttribute("href","http://cnblogs.com/");

    //追加到尾部

    container.appendChild(span);

</script>

document.createTextNode() 创建文本节点

<div id="container">

</div>

<script>

    var container = document.getElementById("container");

    //创建文本节点 无任何标签

    var textNode = document.createTextNode("文本");

    container.appendChild(textNode);

</script>

插入节点

<ul>

    <li>啦啦阿拉</li>

    <li>啦啦阿拉</li>

    <li>啦啦阿拉</li>

</ul>

<script>

    //插入节点

    var newItem = document.createElement("li");

    newItem.innerHTML = "新插入的";

    var list = document.getElementsByTagName("ul")[0];

    list.insertBefore(newItem,list.childNodes[0]); //第二个参数插入的位置

</script>

删除节点

<body id="body">

    <p>1111111111</p>

    <p id="p">22222222</p>

</body>

<script>

    var body = document.getElement("body");

    var p = document.getElementById("p");

    body.removeChild(p);

    p.style.display="none"; //一般创建后不会删除 更多的是隐藏

</script>

23、Javascript DOM的更多相关文章

  1. 前端基础：JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  2. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  3. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  4. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  5. Css、javascript、dom(二)

    一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size ...

  6. Python自动化 【第十五篇】：CSS、JavaScript 和 Dom介绍

    本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 ...

  7. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  8. Python自动化运维之23、Dom

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.最为关心的是,DOM把网页 ...

  9. 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结

    页面响应加载的顺序:   1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...

随机推荐

  1. 1、Window10 Electron 开发环境搭建

    1:首先安装nodejs C:\Users\yan>node -v v4.5.0 2:安装Electron C:\Users\yan>npm install --g electron-pr ...

  2. NOR FLASH与NAND FLASH

    整理自NOR FLASH 与NAND FLASH 1:NandFlash与NorFlash典型电路图 Nor Flash接原理图 从上图可以看出,该NorFlash采用并行地址和数据总线, 其中,21 ...

  3. jsp页面传参到action出现乱码

    jsp页面以连接方式传参到后台action时( <a href="http://localhost:8080/SocialBook/pages/bookdetail?book.id=& ...

  4. 在Win32程序中显示Dos调试窗口，可暂停（AllocConsole，WriteConsole，FreeConsole函数，GetStdHandle函数取得输入句柄）

    在很多程序中,都可以看到程序运行中,会有一个Dos窗口,实时显示一些运行信息,这里就告诉大家是如何实现的,我们做个简单的,其实对控制台的操作还有很多,有兴趣的可以去查资料. 用到的API函数如下: / ...

  5. delphi 连接 c++ builder 生成obj文件

    delphi 连接 c++ builder 生成obj文件 delphi 可以连接c++ builder 生成OMF格式的obj文件,会报一个错.[DCC Error] E2065 Unsatisfi ...

  6. WITH AS and materialize hints

    WITH AS: 就是将一个子查询部分独立出来,有时候是为了提高SQL语句的可读性,有时候是为了提高SQL语句性能. 如果一个SQL语句中,某个表会被访问多次,而且每次访问的限制条件一样的话,就可以使 ...

  7. [LeetCode#274]H-Index

    Problem: Given an array of citations (each citation is a non-negative integer) of a researcher, writ ...

  8. WordPress 开放重定向漏洞

    漏洞名称: WordPress 开放重定向漏洞 CNNVD编号: CNNVD-201309-167 发布时间: 2013-09-13 更新时间: 2013-09-13 危害等级: 高危   漏洞类型: ...

  9. Python异常处理实例

    #coding=utf-8 #---异常处理--- # 写一个自己定义的异常类 class MyInputException(Exception): def __init__(self, length ...

  10. 游戏开发设计模式之原型模式 & unity3d JSON的使用（unity3d 示例实现）

    命令模式:游戏开发设计模式之命令模式(unity3d 示例实现) 对象池模式:游戏开发设计模式之对象池模式(unity3d 示例实现) 实现原型模式 原型模式带来的好处就是,想要构建生成任意独特对象的 ...