JavaScript基础-----(DOM操作的内容)

查询元素

  1.直接访问指定节点的方法

    getElementById():返回一个节点对象        id

    getElementByName():返回多个(节点数组)    名字

    getElementByTagName():返回多个(节点数组)  标签名

  2.间接根据层次关系查找节点

    父节点

      parentNode

    孩子节点

      childNodes 数组对象,表示该节点的多有子节点的集合

      firstChild   lastChild

    兄弟节点

      nextSibling  previousSiBling

操作文本

  1.对于<p></p>、<hn></hn>、<div></div> <span></span>等标签,操作内部文本都使用innetHTML或者innerText

   对于表单项input、select等标签,获取值使用value(属性的操作)

   对于img等标签,不涉及文本

  2.innerHTML   指的是从对象的起始位置到终止位置的全部内容,包括html标签

    innerText    指的是从起始位置到终止位置的内容,但它能去除HTML标签

操作属性

  方法1:setAttribute(属性名,属性值)和getAttribute(属性名)

  方法2  .属性名

  方法1可以对自定义属性进行操作;但是方法2只能对标准属性进行操作

操作元素

  创建节点的方法

    document.createElement("div")

  加入节点的方法

    parentNode.appendChild(childElement):  末尾追加式插入节点

    parentNode.insertBefore(newNode,beforeNode):  在指定节点前插入新节点

  删除节点方法

    parentNode.removeChild(childNode)

  替换节点方法

    parentNode.replace(newNode,oldNode) 

操作css

  使用style对象操作css

    每个style对象对应为该元素指定的css,而每个css属性-对应于style对象的属性

      对于单个单词的css属性,在style对象中的属性名称不变

      对于双单词或多单词属性改写为驼峰命名法。例font-size 为fontSize

      注意:是JavaScript的style对象,不是html标签的style属性,但是有对应关系

原文地址:https://www.cnblogs.com/skyline1/p/12184726.html

时间: 2024-11-09 03:00:12

JavaScript基础-----(DOM操作的内容)的相关文章

javascript基础dom操作html元素

语法:document.getElementById("id"); 举例:<script> window.onload = funtion () { var oDiv = document.getElementById("div1");// js选择html元素id元素 oDiv.style.color = "red";//js控制html元素css样式color颜色: } <script> <body> &l

Python之路day13 web 前端(JavaScript,DOM操作)

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo

第一百一十六节,JavaScript,DOM操作样式

JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测 功能 版本号 说明 Core 1.0.2.0.3.0 基本的DOM,用于表现文档

JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象模型)DOM是HTML与XML的应用编程接口(API) BOM和DOM相辅相成的关系BOM为纲,DOM为目,DOM是BOM的具体体现 3.DOM对象 3.1 Windows对象 3.1.1 confirm function test(){ var res= window.confirm("你要删除&

JavaScript基础--DOM对象加强篇(十四)

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

JavaScript基础—dom,事件

Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让javascript能操作html页面控件的类,函数. 这就是文档对象模型.按照xml文档的理解就可以. à页面中的属性,标签要是没有注明给那个对象,则统一时给window的,我们都可以通过window点击出来,进行操作,这个js中理解的一样.但是我们现在通过document.getElementById

JS - JavaScript和DOM操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效 3.1.onclick:单机 ondblclick:双击 function 执行函数 alert 显示框只有确定 confirm 显示框有确定和取消 prompt 显示框下面填写内容 var 万能变量 <body> <a onclick="a()"></

JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

课堂笔记--------JavaScript 的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

JQuery基础DOM操作

DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribut