1、dom之选择元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>你好</title>

</head>

<body>

<div>

    <div class="c1"></div>

    <div class="c1" id="n1">

        <div name = 'n1'>你好</div>

        <div name = 'n1'>

            <a>123</a>

        </div>

    <div class="c1">asdf</div>

    </div>

    <script>

        document.getElementsByName('n1');

        document.getElementsByTagName();

        document.getElementsByClassName('c1')//根据各种名字查找标签

    </script>

</div>

</body>

</html>

　　总结起来主要如图这几种

运行效果如图

上面的都是直接查找，下面这些是间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

 上面这些是包含文本的

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

　　循环父级标签下面的元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>你好</title>

</head>

<body>

<div>

    <div class="c1 i1"></div>

    <div class="c1" id="n1">

        <div name = 'n1'>你好</div>

        <div name = 'n1'>

            <a>123</a>

        </div>

    <div class="c1">asdf</div>

    </div>

    <script>

    var i1 =document.getElementById('i1')

    var p1 = i1.parentElement;

    var eles = p1.children; //不包含文本的

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

            console.log(eles[i]);

        }//目的是循环出父级下面的每一个标签，p1.children如果用了p1.childreNodes,则要剔除文本

    </script>

　　2、dom之内容操作

获取标签内容

obj = document.getElementsByTagName('a')[0];//去文档寻找所有的a标签，返回一个列表

alert(obj.innerText);//获取的是文本信息

//alert(obj.innerHTML);//获取里面整段html，包括文本

　　通过value可以获取表单内的值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a href="http://www.etiantian.org">xiaonanren<span>小男人</span></a>

<input id="txt" type="text">

<select id="se1">

    <option value="1">上海</option>

    <option value="2">广东</option>

</select>

<script>

document.getElementById('txt')//获取输入的内容

</script>

</body>

</html>

　　执行结果如图

也可以直接赋值，如图

也可以直接操作样式

如图

JavaScript里面之dom操作的更多相关文章

  1. 原生JavaScript常用的DOM操作

    之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或 ...

  2. javascript教程2:---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  3. 网页制作之JavaScript部分 2 - DOM操作

    1.DOM的基本概念  htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对 ...

  4. JavaScript基础：DOM操作详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...

  5. javascript 里找元素操作元素

      javascript  一.找到元素. var d = document.getElementById("") var d = document.getElementsByNa ...

  6. jQuery里面的DOM操作（查找，创建，添加，删除节点）

    一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...

  7. JavaScript常见原生DOM操作API总结

    [TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node ...

  8. JavaScript里利用DOM获取宽高大全

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  9. 将原生JS和jquery里面的DOM操作进行了一下整理

    创建元素节点 1.原生: document.createElement("div") 2.jquery: $("<div></div>" ...

随机推荐

  1. CDH4.5.0源代码编译

    Unable to load native-hadoop library for your platform解决 安装maven 1 cmake-2.8.12.1.tar.gz cd cmake-2. ...

  2. Linux利用i节点删除乱码文件

    Linux删除乱码文件 当文件名为乱码的时候,无法通过键盘输入文件名,所以在终端下就不能直接利用rm,mv等命令管理文件了. 但是我们知道每个文件都有一个i节点号,我们可以考虑通过i节点号来管理文件. ...

  3. Githug攻略

    ruby运行环境安装 githug 是一个 ruby 程序,运行的 githug 需要 ruby 运行环境.下面部分的主要内容是如何在不同平台上安装好 ruby 环境. MacOSX MacOSX 里 ...

  4. C#获取包括一二级汉字的拼音 首字母

    C#获取包括一二级汉字的拼音 首字母 声母 汉字拼音转换 using System; using System.Collections.Generic; using System.Linq; usin ...

  5. hdu_2837_Calculation（欧拉函数，快速幂求指数循环节）

    Assume that f(0) = 1 and 0^0=1. f(n) = (n%10)^f(n/10) for all n bigger than zero. Please calculate f ...

  6. thymeleaf单选回显，多选回显，选回显，下拉默认选中第一个

    //默认选中第一个<input type ="radio" name="repaymentType" th:each ="repaymentTy ...

  7. python实现简单关联规则Apriori算法

    from itertools import combinations from copy import deepcopy # 导入数据,并剔除支持度计数小于min_support的1项集 def lo ...

  8. v-cloak

    v-cloak 不需要表达式 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...

  9. 简单了解,使用oracle中的索引,表分区

    索引的分类 如下: 物理分类 逻辑分类 分区或非分区索引 单列或组合索引 B树索引(标准索引) 唯一或非唯一索引 正常或反向键索引 基于函数索引 位图索引   B树索引 b树索引通常也称为标准索引,索 ...

  10. pycharm中文乱码问题 总结

    前言: 这几天刚刚开始学习python,然后就安装了pycharm,但是那个中文乱码的问题真是让人心烦,在网上找了好久,都写得好乱,今天终于让我解决了,在这里总结一下经验,希望可以帮到你们 问题:如下 ...